1.activity_main.xml布局页面包括主页面内容和侧拉页面FrameLayout为侧拉页面占位布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/draw"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/bottom_indicator"
android:layout_alignParentBottom="true"
app:tabTextColor="@color/colorPrimary"
app:tabSelectedTextColor="@color/colorAccent"
app:tabIndicatorColor="@android:color/transparent"
app:tabIndicatorHeight="1dp"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/v_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_indicator"
>
</android.support.v4.view.ViewPager>
</RelativeLayout>
<FrameLayout
android:id="@+id/left_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
2.侧拉页面需要一个fragment布局页面
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ListView
android:id="@+id/menus"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
</ListView>
</android.support.constraint.ConstraintLayout>
3.侧拉的fragment页面
package com.example.Fragment;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;
import com.example.Adaper.LeftMenuAdaper;
import com.example.day12_tablayout01.MainActivity;
import com.example.day12_tablayout01.R;
public class LeftFragment extends Fragment {
private ListView listView;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.leftfragment,container,false);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
//获取资源id
listView = view.findViewById(R.id.menus);
//设置适配器
listView.setAdapter(new LeftMenuAdaper(getActivity()));
//点击跳转
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//图片不可以点击
if(position==0){
return;
}
((MainActivity)getActivity()).showPage(position-1);
}
});
super.onViewCreated(view, savedInstanceState);
}
}
4.MainActivity页面加载侧拉和Tablayout切换fragment
package com.example.day12_tablayout01;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.MenuItem;
import android.widget.ListView;
import com.example.Adaper.MinePageAdaper;
import com.example.Fragment.LeftFragment;
public class MainActivity extends AppCompatActivity {
private DrawerLayout layout;
private ActionBarDrawerToggle toggle;
private ViewPager viewPager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//为空才添加fragment:
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.left_drawer, new LeftFragment())
.commit();
//初始化view
initView();
}
}
//初始化view
private void initView() {
//允许标题栏展示左边icon
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//获取资源id
layout = findViewById(R.id.draw);
//actionbar和drawerlayout中间人
toggle = new ActionBarDrawerToggle(this, layout, R.string.open_drawer, R.string.close_drawer);
layout.addDrawerListener(toggle);
toggle.syncState();
//获取资源id
viewPager = findViewById(R.id.v_pager);
//绑定adaper
viewPager.setAdapter(new MinePageAdaper(getSupportFragmentManager()));
//获取资源id
tabLayout = findViewById(R.id.bottom_indicator);
tabLayout.setupWithViewPager(viewPager);
}
//点击切换
public void showPage(int position){
viewPager.setCurrentItem(position);
layout.closeDrawer(Gravity.START);
}
//支持点击
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if(toggle.onOptionsItemSelected(item)){
return true;
}
return super.onOptionsItemSelected(item);
}
}
5.侧拉页面的适配器 多条目展示侧拉
package com.example.Adaper;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.day12_tablayout01.R;
public class LeftMenuAdaper extends BaseAdapter {
private String[] menus = new String[]{
"首页", "视频", "我的"
};
private Context mContext;
public LeftMenuAdaper(Context mContext) {
this.mContext = mContext;
}
private final int ITEM_COUNT = 2;
private final int IMAGE_TYPE = 0;
private final int TEXT_TYPE = 1;
@Override
public int getCount() {
return menus.length + 1;
}
@Override
public int getViewTypeCount() {
return ITEM_COUNT;
}
@Override
public int getItemViewType(int position) {
return position==0?IMAGE_TYPE:TEXT_TYPE;
}
@Override
public String getItem(int position) {
//预防position ==0的情况
if (position == 0) {
return null;
}
return menus[position - 1];
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder =null;
if (convertView == null){
convertView = LayoutInflater.from(mContext).inflate(
getItemViewType(position)==IMAGE_TYPE? R.layout.menuimageitem:R.layout.menutextitem
,parent,false);
holder = new ViewHolder(convertView);
}
if(getItemViewType(position) == TEXT_TYPE){
holder.bind(getItem(position));
}
return convertView;
}
//创建寄存器
class ViewHolder{
ImageView image;
TextView text;
//获取资源id
public ViewHolder(View convertView) {
image = convertView.findViewById(R.id.image_menus);
text = convertView.findViewById(R.id.menu_text);
convertView.setTag(this);
}
//赋值
public void bind(String item) {
text.setText(item);
}
}
}
6.侧拉多条目展示的两个布局一个布局为头像一个为条目
6.1头像布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/image_menus"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:src="@mipmap/ic_launcher"
/>
</android.support.constraint.ConstraintLayout>
6.2.条目布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/menu_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
/>
</android.support.constraint.ConstraintLayout>
7.Tablayout切换fragment的适配器
package com.example.Adaper;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.example.Fragment.HomeFragment;
import com.example.Fragment.MineFragment;
import com.example.Fragment.VideoFragment;
public class MinePageAdaper extends FragmentPagerAdapter {
private String[] menus = new String[]{
"首页", "视频", "我的"
};
public MinePageAdaper(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int i) {
switch (i){
case 0:
return new HomeFragment();
case 1:
return new VideoFragment();
case 2:
return new MineFragment();
default:
return new Fragment();
}
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return menus[position];
}
@Override
public int getCount() {
return menus.length;
}
}
8.fragment嵌套fragment 实现tablayout切换fragment fragment页面
package com.example.Fragment;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.Adaper.HomeAdaper;
import com.example.day12_tablayout01.R;
public class HomeFragment extends Fragment {
private TabLayout tabLayout;
private ViewPager viewPager;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.home_fragment,container,false);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
tabLayout = view.findViewById(R.id.top_indicator);
viewPager = view.findViewById(R.id.v_viewpage);
//设置适配器
////////////////////////////
viewPager.setAdapter(new HomeAdaper(getChildFragmentManager()));
tabLayout.setupWithViewPager(viewPager);
super.onViewCreated(view, savedInstanceState);
}
}
9.fragment嵌套fragment 布局页面``
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.TabLayout
android:id="@+id/top_indicator"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:tabMode="scrollable"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/v_viewpage"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/top_indicator"
app:layout_constraintBottom_toBottomOf="parent"
>
</android.support.v4.view.ViewPager>
</android.support.constraint.ConstraintLayout>
10.fragment嵌套fragment 实现tablayout切换fragment 适配器页面
package com.example.Adaper;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.example.Fragment.BeijingFragment;
import com.example.Fragment.HoutFragment;
import com.example.Fragment.RecoFragment;
import com.example.Fragment.RecreationFragment;
import com.example.Fragment.SmallFragment;
import com.example.Fragment.VidFragment;
public class HomeAdaper extends FragmentPagerAdapter {
private String[] pageNames = new String[]{
"推荐","小视频","视频","热点","北京","娱乐"
};
public HomeAdaper(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int i) {
switch (i){
case 0:
return new RecoFragment();
case 1:
return new SmallFragment();
case 2:
return new VidFragment();
case 3:
return new HoutFragment();
case 4:
return new BeijingFragment();
case 5:
return new RecreationFragment();
default:
return new Fragment();
}
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return pageNames[position];
}
@Override
public int getCount() {
return pageNames.length;
}
}