SeniorUI28_Meterail Design综合使用实现侧拉栏主页

最新推荐文章于 2021-08-11 22:57:28 发布

原创最新推荐文章于 2021-08-11 22:57:28 发布 · 278 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#DrawerLayout #TabLayout #Toolbar #Palette #RGB颜色加深

Android 专栏收录该内容

240 篇文章

订阅专栏

本文详细介绍了如何使用Toolbar、DrawerLayout、TabLayout和ViewPager等组件构建复杂UI界面，通过Palette API对ViewPager中的图片进行取色，实现状态栏、标题栏及TabLayout背景的动态配色，并利用RGB位运算技巧加深颜色，最终打造出一款响应式且视觉效果丰富的APP主页。

SeniorUI_高级UI汇总目录
 SeniorUI28_Tablayout简介

一效果图

在这里插入图片描述

二需求

实现一个APP的主页
有侧拉栏，有顶部标题，有tab二级标题
主内容区是个可滑动的Banner和二级标题联动
状态栏、标题栏、二级标题tab的背景受到Banner显示内容图片的影响
状态栏颜色加深

三需求分析

Toolbar实现顶部标题
DrawerLayout实现侧拉栏
TabLayout+ViewPager实现二级标题栏和Banner
Palette 的API对ViewPager中图片取色

获取对应Bitmap的Palette.Swatch设置标题栏、TabLayout和状态栏
RGB的位运算实现颜色加深，单通道颜色色值越小，颜色越深

四主要代码

1 添加依赖

implementation ‘com.android.support:appcompat-v7:26.1.0’
compile “com.android.support:design:$supportLibVersion”
compile ‘com.android.support:palette-v7:23.4.0’

2 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
 >
    <include layout="@layout/layout_includ"/>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--两个子控件   -->

        <!--抽屉栏-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/drawer"
            android:layout_gravity="start"
            ></LinearLayout>

        <!--内容区域-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="#00FFFF"
                app:tabTextColor="@color/colorAccent"
                app:tabIndicatorColor="@color/colorPrimary"
                >

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

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

3 代码使用

/**
 * Created by Ray on 2019-12-18.
 */
public class TabLayoutActivity extends AppCompatActivity {

    TabLayout tabLayout;
    ViewPager viewPager;
    MyAdatper myAdatper;
    Toolbar toolbar;
    DrawerLayout drawerLayout;
    private final String[] titels = {"分类", "主页", "热门推荐", "热门收藏", "本月热榜", "今日热榜", "专栏", "随机"};
    private int[] drawbles = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h};

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

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer);

        toolbar.setTitle("TabLayout等design包下View的综合使用");
        //顺序非常重要  设置 文字 样式调用setSupportActionBar  之前     设置监听在 setSupportActionBar之后
        setSupportActionBar(toolbar);

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close);
        toggle.syncState();
        drawerLayout.addDrawerListener(toggle);

        myAdatper = new MyAdatper(getSupportFragmentManager());
        viewPager.setAdapter(myAdatper);
        //设置联动
        tabLayout.setupWithViewPager(viewPager);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                colorChage(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        colorChage(0);
    }

    /**
     * 如果页面 发生切换     根据BItmap改变toolBar的颜色
     *
     * @param position
     */
    private void colorChage(int position) {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), drawbles[position]);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                //拿到鲜艳的颜色
                Palette.Swatch vibreant = palette.getVibrantSwatch();
                if (vibreant == null) {
                    for (Palette.Swatch swatch : palette.getSwatches()) {
                        if (swatch != null) {
                            vibreant = swatch;
                            break;
                        }
                    }
                }

                viewPager.setBackgroundColor(vibreant.getRgb());
                tabLayout.setSelectedTabIndicatorColor(vibreant.getRgb());
                tabLayout.setBackgroundColor(vibreant.getRgb());
                toolbar.setBackgroundColor(vibreant.getRgb());
                if (Build.VERSION.SDK_INT > 21) {
                    Window window = getWindow();
                    //状态栏 颜色加深
                    window.setStatusBarColor(colorBurn(vibreant.getRgb()));
                    window.setNavigationBarColor(vibreant.getRgb());
                }
            }
        });
    }

    private int colorBurn(int rgb) {
        //加深颜色
        int red = rgb >> 16 & 0xFF;
        int green = rgb >> 8 & 0xFF;
        int blue = rgb&0xFF;

        red = (int) Math.floor(red * (1 - 0.2));
        green = (int) Math.floor(green * (1 - 0.2));
        blue = (int) Math.floor(blue * (1 - 0.2));
        return Color.rgb(red, green, blue);
    }


    class MyAdatper extends FragmentPagerAdapter {


        public MyAdatper(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new ImageFrament();
            Bundle bundle = new Bundle();
            bundle.putInt("id", drawbles[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return drawbles.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titels[position];
        }
    }
}