布局
1.主布局MainActivity
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/contents">
</android.support.v4.view.ViewPager>
<!--app:tabGravity="fill" 均分-->
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tabLayout"
app:tabGravity="fill"
app:tabTextColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight="1dp">
</android.support.design.widget.TabLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="@+id/left_drawer"
android:background="#ffffff"/>
</android.support.v4.widget.DrawerLayout>
2.侧拉布局
<?xml version="1.0" encoding="utf-8"?><LinearLayout
?xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/menus"></ListView>
</LinearLayout>
2.1侧拉内部布局listView
上方图片
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<ImageView
android:id="@+id/icon"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
下方列表
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/text"
android:padding="20dp"/>
</LinearLayout>
3.TabLayout的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
android:id="@+id/top_indicator">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/contents"></android.support.v4.view.ViewPager>
</LinearLayout>
4.TabLayout和ViewPager内部布局差不多,就只写一个
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--自己更改内部内容,这只写一个Text代表页面-->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="视频"/>
</LinearLayout>
MainActivity
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.view.View;
import com.bwie.asus.viewpager_drawer_tab.adapter.MainPageAdapter;
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle mToggle;
private ViewPager contents;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//为空才添加Fragment:左边菜单s
if (savedInstanceState==null){
getSupportFragmentManager()
.beginTransaction()
.add(R.id.left_drawer,new LeftFragment())
.commit();
}
//初始化View
initView();
}
private void initView() {
//允许标题栏展示左边icon
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
drawerLayout = findViewById(R.id.drawer);
//actionbar和DrawerLayout中间人,把中间人创建出来
mToggle = new ActionBarDrawerToggle(this,drawerLayout,R.string.open,R.string.close);
drawerLayout.addDrawerListener(mToggle);
//同步
mToggle.syncState();
contents = findViewById(R.id.contents);
contents.setAdapter(new MainPageAdapter(getSupportFragmentManager()));
tabLayout = findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(contents);
}
public void showPage(int position){
contents.setCurrentItem(position);
drawerLayout.closeDrawer(Gravity.START);
}
//左上角点击
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (mToggle.onOptionsItemSelected(item)){
return true;
}
return super.onOptionsItemSelected(item);
}
}
侧拉内容
LeftFragment
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.bwie.asus.viewpager_drawer_tab.adapter.LeftMenuAdapter;
public class LeftFragment extends Fragment {
private ListView menus;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.left_fragment, container, false);
return view;
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
menus = view.findViewById(R.id.menus);
menus.setAdapter(new LeftMenuAdapter(getActivity()));
menus.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);
}
});
}
}
侧拉的适配器
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.bwie.asus.viewpager_drawer_tab.R;
public class LeftMenuAdapter extends BaseAdapter {
private String[] menus=new String[]{"首页","视频","我的"};
private Context mContext;
private final int ITEM_COUNT=2;
private final int IMAGE_TYPE=0;
private final int TEXT_TYPE=1;
public LeftMenuAdapter(Context mContext) {
this.mContext = mContext;
}
@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) {
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 viewHolder=null;
if (convertView==null){
convertView= LayoutInflater.from(mContext)
.inflate(getItemViewType(position)==IMAGE_TYPE?R.layout.mene_image_item : R.layout.menu_text_item
,parent,false);
viewHolder=new ViewHolder(convertView);
}else {
viewHolder= (ViewHolder) convertView.getTag();
}
if (getItemViewType(position)==TEXT_TYPE){
viewHolder.bindData(getItem(position));
}
return convertView;
}
class ViewHolder{
ImageView imageView;
TextView textView;
public ViewHolder(View itemView){
imageView=itemView.findViewById(R.id.contents);
textView=itemView.findViewById(R.id.text);
itemView.setTag(this);
}
public void bindData(String text){
textView.setText(text);
}
}
}
底部Fragment的适配器
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.bwie.asus.viewpager_drawer_tab.fragment.HomeFragment;
import com.bwie.asus.viewpager_drawer_tab.fragment.MineFragment;
import com.bwie.asus.viewpager_drawer_tab.fragment.VideoFragment;
public class MainPageAdapter extends FragmentPagerAdapter {
private String[] menus=new String[]{"首页","视频","我的"};
public MainPageAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position){
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;
}
}
TabLayout
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.bwie.asus.viewpager_drawer_tab.R;
import com.bwie.asus.viewpager_drawer_tab.adapter.HomePageAdapter;
public class HomeFragment extends Fragment {
private TabLayout tabLayout;
private ViewPager contents;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.sy_fragment, container, false);
return view;
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
tabLayout = view.findViewById(R.id.top_indicator);
contents = view.findViewById(R.id.contents);
contents.setAdapter(new HomePageAdapter(getChildFragmentManager()));
tabLayout.setupWithViewPager(contents);
}
}
适配器
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.widget.BaseAdapter;
import com.bwie.asus.viewpager_drawer_tab.fragment.BaseFragment;
import com.bwie.asus.viewpager_drawer_tab.fragment.RecommendFragment;
public class HomePageAdapter extends FragmentPagerAdapter {
private String[] pageNames=new String[]{"推荐","小视频","微博","今日头条","看点","快手","抖音"};
public HomePageAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new RecommendFragment();
default:
return new BaseFragment();
}
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return pageNames[position];
}
@Override
public int getCount() {
return pageNames.length;
}
}
实现效果
侧拉
tabLayout和ViewPager