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];
}
}
}
五 Demo
