viewpager+tablayout+fragment+drawlayout+navigationview+toobar实现仿B站双导航栏+侧滑菜单

于 2020-02-26 15:59:20 发布
阅读量849 收藏 20
点赞数
分类专栏： 安卓基础 文章标签： android studio android viewpager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq2247064190/article/details/104518119
版权

效果图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Manifest.xml:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimaryDark">@color/color_tabselected</item>//状态栏颜色
    </style>
</resources>

actcivity_main2.xml(主布局):

<android.support.v4.widget.DrawerLayout 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:orientation="vertical"
    android:id="@+id/drawerLayout">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >
    <!--toolbar写在主内容布局下会被侧滑菜单覆盖-->
    <!--navigationIcon设置返回键图标-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/color_tabselected"
            app:navigationIcon="@mipmap/menu"
            >
        </android.support.v7.widget.Toolbar>


<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="549dp"
    android:id="@+id/viewPager_main"
   ></android.support.v4.view.ViewPager>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:id="@+id/line_bottom"
        android:background="#EEEEEE"
        ></View>
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:tabMode="fixed"
        android:id="@+id/tabLayout_bottom"
        app:tabIndicatorHeight="0dp"
       ></android.support.design.widget.TabLayout>
</LinearLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_head"
        android:scrollbars="none"
        android:id="@+id/nav"
        app:itemTextColor="@color/selector_menu"//设置文字颜色
        app:itemIconTint="@color/selector_menu">//设置图标颜色
    >


    </android.support.design.widget.NavigationView>


</android.support.v4.widget.DrawerLayout>

fragment_homepage.xml(底部tablayout布局，共四个):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:tabMode="scrollable"
        app:tabIndicatorColor="@color/color_tabselected"
        app:tabIndicatorHeight="3dp"
        app:tabTextColor="@color/color_tabdefault"
        app:tabSelectedTextColor="@color/color_tabselected"
        app:tabGravity="center"
        app:tabTextAppearance="@style/TextSize_tab"
        android:id="@+id/tabLayout_top"
        >

    </android.support.design.widget.TabLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:id="@+id/line_bottom"
        android:background="#EEEEEE"
        ></View>

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="509dp"
            android:id="@+id/viewPager"></android.support.v4.view.ViewPager>



</LinearLayout>

fragment_hot.xml(顶部tablayout布局,共6个):

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name" />
</LinearLayout>

tabview.xml(自定义tab视图):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <ImageView
        android:layout_width="27dp"
        android:layout_height="27dp"
        android:src="@drawable/tabicon_channel_default"
        android:id="@+id/tabicon"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13sp"
        android:text="频道"
        android:layout_marginTop="2dp"
        android:textColor="@drawable/selector_tabtitle"


        android:id="@+id/tabtitle"
        />
</LinearLayout>

nav_head.xml(侧滑菜单头部布局):

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="155dp"
    android:orientation="vertical"
    android:background="@color/color_tabselected">
    <de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:src="@drawable/daoqi1"
    android:id="@+id/profilephoto"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="15dp"
    />
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="道奇挑战者"
    android:textSize="15sp"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="10dp"
    android:textColor="#FFFFFF"
    />
    <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="10dp">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#DDDDDD"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="15dp"
    android:text="B币：0.0"
    />
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#DDDDDD"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="15dp"
    android:text="硬币：0.0"
    android:layout_gravity="right"
    />
    </LinearLayout>


</LinearLayout>

nav_menu.xml(侧滑菜单菜单布局):

/****选择器对item无用***/
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/menu_homepage"
            android:icon="@drawable/selector_tabicon_homepage"
            android:title="首页"></item>
        <item
            android:id="@+id/menu_history"
            android:icon="@drawable/selector_item_history"
            android:title="历史记录"></item>
        <item
            android:id="@+id/menu_dowmload"
            android:icon="@drawable/selector_item_download"
            android:title="下载管理"></item>
        <item
            android:id="@+id/menu_collect"
            android:icon="@drawable/selector_item_collect"
            android:title="我的收藏"></item>

        <item
            android:id="@+id/menu_later"
            android:icon="@drawable/selector_item_later"
            android:title="稍后再看"></item>
        <item
            android:id="@+id/menu_dressup"
            android:icon="@drawable/selector_item_dressup"
            android:title="个性装扮"></item>


    </group>
    <group
        android:id="@+id/group2"
        android:checkableBehavior="single">
        <item
            android:id="@+id/menu_issue"
            android:title="发布"
            android:icon="@drawable/selector_item_issue"></item>
        <item
            android:id="@+id/menu_create"
            android:title="创作中心"
            android:icon="@drawable/selector_item_create"></item>
        <item
            android:id="@+id/hot"
            android:title="热门活动"
            android:icon="@drawable/selector_item_hotactivity"></item>

    </group>
    <group android:id="@+id/group3"
        android:checkableBehavior="single">
        <item
            android:id="@+id/game"
            android:title="游戏"
            android:icon="@drawable/selector_item_game"></item>
        <item
            android:id="@+id/service"
            android:title="客服"
            android:icon="@drawable/selector_item_service"></item>

    </group>

</menu>

selector_tabicon_channel.xml(tab图标选择器，共四个）:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:drawable="@drawable/tabicon_channel_default"></item>
    <item  android:state_selected="true" android:drawable="@drawable/tabicon_channel_selected"></item>
    </selector>

selecter_tabtitle.xm(tab标题颜色选择器):

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/color_tabselected"></item>
    <item  android:color="@color/color_tabdefault"></item>
</selector>

MainActivity2.java:

public class MainActivity2 extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    private ViewPager viewPager_main;
    private List<Fragment> list_fragment = new ArrayList<>();
    private TabLayout tabLayout_bottom;
    private NavigationView nav;
    private Toolbar toolbar;
    private DrawerLayout drawerLayout;

    private String[] tabtitles = {"主页", "频道", "动态", "会员购"};
    private int[] tabicons = {R.drawable.selector_tabicon_homepage, R.drawable.selector_tabicon_channel, R.drawable.selector_tabicon_development, R.drawable.selector_tabicon_shopping};


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);


        initViewPager();
        initToolBar();
        initTablayout();
        drawerLayout = findViewById(R.id.drawerLayout);
        nav = findViewById(R.id.nav);
        //默认选中菜单第一行
        nav.setCheckedItem(R.id.menu_homepage);
        nav.setNavigationItemSelectedListener(this);

    }

    //初始化ToolBar
    private void initToolBar() {
        toolbar = findViewById(R.id.toolbar);
        //用toolbar代替actionbar
        setSupportActionBar(toolbar);
        //使返回按钮可点击
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        //隐藏标配
        getSupportActionBar().setDisplayShowTitleEnabled(false);

    }

    //初始化viewpager
    private void initViewPager() {
        viewPager_main = findViewById(R.id.viewPager_main);
        list_fragment.add(new HomepageFragment());
        list_fragment.add(new ChannelFragment());
        list_fragment.add(new DevelopmentFragment());
        list_fragment.add(new ShoppingFragment());

        MainActivityAdapter mainActivityAdapter = new MainActivityAdapter(getSupportFragmentManager(), list_fragment);
        viewPager_main.setAdapter(mainActivityAdapter);

    }

    //初始化tablayout
    private void initTablayout() {
    	LayoutInflater inflater = LayoutInflater.from(this);
        tabLayout_bottom = findViewById(R.id.tabLayout_bottom);
        //为tab设置自定义视图
        for (int i = 0; i < tabicons.length; i++) {

            TabLayout.Tab tab = tabLayout_bottom.newTab();
            View view = inflater.inflate(R.layout.tabview, null);

            //为tab设置自定义视图
            tab.setCustomView(view);

            TextView tabtitle = (TextView) view.findViewById(R.id.tabtitle);
            tabtitle.setText(tabtitles[i]);


            ImageView tabicon = (ImageView) view.findViewById(R.id.tabicon);
            tabicon.setImageResource(tabicons[i]);


            //添加tab
            tabLayout_bottom.addTab(tab);

            //关联tablyout
            viewPager_main.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout_bottom));
            tabLayout_bottom.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    //取消viewpager滑动效果
                    viewPager_main.setCurrentItem(tab.getPosition(), false);


                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {

                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {

                }
            });

        }

    }
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
      //点击返回键弹出侧滑菜单
        if (item.getItemId() == android.R.id.home) {
            drawerLayout.openDrawer(GravityCompat.START);
        }
        return true;
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_history:
                Intent intent = new Intent(this,HistoryActivity.class);
                startActivity(intent);
                break;

        }
        return true;
    }
}

MainActivityAdapter.java:

public class MainActivityAdapter extends FragmentPagerAdapter {
    private List<Fragment> list_fragment;

    public MainActivityAdapter(FragmentManager fragmentManager,List<Fragment> list_fragment){
        super(fragmentManager);
        this.list_fragment = list_fragment;

    }
    @Override
    public Fragment getItem(int i) {

        return list_fragment.get(i);
    }


    @Override
    public int getCount() {
        return 4;
    }

}

HomePageFragment.java:

public class HomepageFragment extends Fragment {
    private String[] tabtitles_top = {"直播", "推荐", "热门", "追番", "影视", "抗击肺炎"};
    private List<Fragment> list_fragment1 = new ArrayList<>();
    private TabLayout tabLayout_top;
    private ViewPager viewPager;


    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_homepage, container, false);
        viewPager = view.findViewById(R.id.viewPager);
        tabLayout_top = view.findViewById(R.id.tabLayout_top);






        HomepageFragmentAdapter homepageFrgementAdapter = new HomepageFragmentAdapter(getChildFragmentManager(), tabtitles_top);
        viewPager.setAdapter(homepageFrgementAdapter);
        //tablayout绑定viewpager
        tabLayout_top.setupWithViewPager(viewPager);


        return view;

    }
}

HomepageFragmentAdapter.java:

public class HomepageFragmentAdapter extends FragmentPagerAdapter {

    private String[] tabtitles_top;


    public HomepageFragmentAdapter(FragmentManager fm, String[] tabtitles_top) {
        super(fm);
        this.tabtitles_top = tabtitles_top;
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = null;
        switch (i) {
            case 0:
                fragment = new LiveFragment();
                break;
            case 1:
                fragment = new RecommendFragment();
                break;
            case 2:
                fragment = new HotFragment();
                break;
            case 3:
                fragment = new SeriesFragment();
                break;
            case 4:
                fragment = new FilmFragment();
                break;
            case 5:
                fragment = new FightFragment();
                break;
        }
        return fragment;

        }

    @Override
    public int getCount() {
        return 6;
    }
    //获得tab标题
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return tabtitles_top[position];
    }
}

HotFragment.java:

public class HotFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_hot, container, false);
        return view;
    }
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值