Material Design（二）（控件）

最新推荐文章于 2024-05-13 22:46:08 发布

米粒蜗牛

最新推荐文章于 2024-05-13 22:46:08 发布

阅读量703

点赞数

分类专栏： Android 应用篇

本文链接：https://blog.csdn.net/weixin_41729259/article/details/94493602

版权

Android 应用篇专栏收录该内容

22 篇文章 2 订阅

订阅专栏

Material Design （控件）

引入包：
compile ‘com.android.support:appcompat-v7:25.3.1’
compile ‘com.android.support:design:25.3.1’

Material Design（一）：material Design 的主题以及取色板的使用
https://blog.csdn.net/weixin_41729259/article/details/89554791
Material Design总结视图

大概布局有：

TextInputLayout TextInputEditText（文本输入布局）、
cardView (卡片)
Snackbar、用来代替 Toast
FloatingActionButton（浮动按钮）、
SwipeRefreshLayout （下拉刷新）
ToolBar （替换actionBar作为系统栏使用）
TabLayout（选项卡布局）、
NavigationView(导航视图)、
BottomNavigationView
AppBarLayout（应用程序栏布局）、
CoordinatorLayout（协作布局）、
CollapsingToolbarLayout（折叠工具栏布局

TextInputLayout

参考：https://www.jianshu.com/p/2b0cd9e9a4d9

常用属性和对应方法

属性名	对应方法	作用
app:hint	setHint(CharSequence)	设置浮动提示语
app:hintEnabled	setHintEnabled(boolean)	设置是否开启浮动功能
app:hintAnimationEnabled	setHintAnimationEnabled(boolean)	设置是否开启浮动提示动画
null	setError	设置错误提示
app:errorEnabled	setErrorEnabled(boolean)	设置是否开启错误提示
app:counterEnabled	setCounterEnabled(boolean)	设置是否开启计数器
app:counterMaxLength	setCounterMaxLength(int)	设置计数器的最大长度（超过并不影响输入）
app:passwordToggleEnabled	setPasswordVisibilityToggleEnabled(boolean)	设置是否开启密码可见开关(EditText必须为password类型才起作用)
app:passwordToggleDrawable	setPasswordVisibilityToggleDrawable(Drawable)	设置密码可见开关的图标

代码示例

<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_marginTop="20dp"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:hint="请输入用户名"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_marginTop="20dp"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:hint="请输入邮箱"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>
</LinearLayout>

进阶用法

属性名	对应方法	作用
app:hintTextAppearance	setHintTextAppearance(int ResId)	设置浮标样式
app:errorTextAppearance	setErrorTextAppearance(int ResId)	设置错误样式
app:counterTextAppearance	null	设置计数样式
app:counterTextAppearance	null	设置超出计数样式
app:passwordToggleDrawable	setPasswordVisibilityToggleDrawable(int ResId)	设置自定义图标

自定义hint样式

 <!-- 设置提示文字样式 -->
    <style name="hintAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">#08ff00</item>
    </style>

自定义error样式

 <!-- 设置错误提示文字样式 -->
    <style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#001aff</item>
    </style>

自定义超出长度样式

<!-- 设置超出长度提示文字样式 -->
    <style name="overAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#001aff</item>
    </style>

自定义密码图标

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_close" android:state_checked="false" android:state_pressed="false" />
    <item android:drawable="@drawable/pwd_open" android:state_checked="false" android:state_pressed="true" />
    <item android:drawable="@drawable/pwd_open" android:state_checked="true" android:state_pressed="false" />
    <item android:drawable="@drawable/pwd_close" android:state_checked="true" android:state_pressed="true" />
</selector>

CardView

implementation ‘com.android.support:appcompat-v7:28.0.0’
implementation ‘com.android.support:cardview-v7:28.0.0’

使用示例

<android.support.v7.widget.CardView
        android:id="@+id/cardView"
        app:cardCornerRadius="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="棒冰行动，公益传播设计夏令营" />
    </android.support.v7.widget.CardView>

CardView的常用属性

app:cardBackgroundColor这是设置背景颜色 
app:cardCornerRadius这是设置圆角大小 
app:cardElevation这是设置z轴的阴影 
app:cardMaxElevation这是设置z轴的最大高度值 
app:cardUseCompatPadding是否使用CompatPadding 
app:cardPreventCornerOverlap是否使用PreventCornerOverlap 
app:contentPadding 设置内容的padding 
app:contentPaddingLeft 设置内容的左padding 
app:contentPaddingTop 设置内容的上padding 
app:contentPaddingRight 设置内容的右padding 
app:contentPaddingBottom 设置内容的底padding

Snackbar

参考：https://blog.csdn.net/lhy349/article/details/81096093

什么是Snackbar

Snackbar 是 Android 5.0 新特性——Material Design 中的一个控件，用来代替 Toast
，Snackbar与Toast的主要区别是：Snackbar可以滑动退出，也可以处理用户交互（点击）事件。

Snackbar的特性

Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失；
可以在屏幕上滑动关闭；
出现时不会阻碍用户在屏幕上的输入
屏幕上同时最多只能显示一个Snackbar
如果在屏幕上有一个Snackbar的情况下再显示一个Snackbar，则先将当前显示的Snackbar隐藏后再显示新的Snackbar
可以在Snackbar中添加一个按钮，处理用户点击事件
Snackbar一般需要CoordinatorLayout来作为父容器，CoordinatorLayout保证Snackbar可以右滑退出

Snackbar的使用

implementation ‘com.android.support:design:28.0.0’

使用

Snackbar.make(view, message, duration)
        .setAction(action message, click listener)
        .show();

参数说明

make() 方法的第一个参数是一个 view，snackbar 会找到一个父 view，以寄存所赋的 snackbar 值。Snackbar 会沿着 view 的树状路径，找到第一个合适的布局或窗口视图，作为父
view。一般是一个CoordinatorLayout对象。
第二个参数是Snackbar中想要显示的内容，一般只能显示2行；
第三个参数是Snackbar想要显示的时间长短，有三个值：LENGTH_INDEFINITE 永远显示、LENGTH_LONG显示较长时间、LENGTH_SHORT 显示较短时间；
Snackbar也要像Toast一样，调用show()方法才能显示。

                Snackbar.make(coordinatorLayout, "这是一个snackbar", Snackbar.LENGTH_SHORT) 
                        .setAction("action", new View.OnClickListener() { 
                            @Override 
                            public void onClick(View v) {  //Snackbar点击事件
                                Snackbar.make(coordinatorLayout, "Action 被点击", Snackbar.LENGTH_SHORT).show(); 
                            } 
                        }) .addCallback(new Snackbar.Callback(){ //Snackbar弹出和消失时的监听
                            @Override 
                            public void onDismissed(Snackbar transientBottomBar, int event) { 
                                super.onDismissed(transientBottomBar, event);
                                Toast.makeText(coordinatorLayout.this, "Snackbar隐藏", Toast.LENGTH_SHORT).show(); }
                                @Override 
                                public void onShown(Snackbar sb) { 
                                super.onShown(sb); 
                                Toast.makeText(coordinatorLayout.this, "Snackbar显示", Toast.LENGTH_SHORT)
                                        .show();
                            } }) .show();

FloatingActionButton

https://blog.csdn.net/gaolh89/article/details/79759404

implementation ‘com.android.support:design:28.0.0’

FAB常用属性

app:elevation=“8dp”：阴影的高度，elevation是Android
5.0中引入的新属性，设置该属性使控件有一个阴影，感觉该
控件像是“浮”起来一样，这样达到3D效果。对应的方法：setCompatElevation(float)
app:fabSize=“normal”：FAB的大小，为normal时，大小为：56 * 56dp ，为mini时，大小为： 40 *
40 dp。
app:backgroundTint="#31bfcf"：FAB的背景颜色。
app:rippleColor="#e7d16b"：点击FAB时，形成的波纹颜色。
app:borderWidth=“0dp”：边框宽度，通常设置为0 ，用于解决Android 5.X设备上阴影无法正常显示的问题
app:pressedTranslationZ=“16dp”:点击按钮时，按钮边缘阴影的宽度，通常设置比elevation的数值大!

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="16dp"
        android:src="@mipmap/fload_add"
        app:backgroundTint="@color/deepskyblue"
        app:elevation="5dp"
        app:pressedTranslationZ="12dp"
        app:fabSize="normal"
        app:borderWidth="0dp"
        app:rippleColor="#cccccc" />

另外我们希望点击按钮一个颜色，正常状态一个颜色以提高用户体验，那么就是drawable文件夹中创建文件 floatbutton.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorNormal"></item>
    <item android:state_pressed="true" android:drawable="@color/colorPressed"></item>
</selector>

然后我们设置FloatActionButton的backgroud为这个drawable文件即可，同时app:backgroundTint=""属性也可以不再设置

SwipeRefreshLayout

https://blog.csdn.net/etwge/article/details/80136513
**

SwipeRefreshLayout是官方提供的下拉刷新解决控件，具有使用简单，灵活等特点。不足的地方，不可以自定义刷新的头部和加载更多功能。不过通过修改SwipeRefreshLayout可以轻松实现这些功能，本文只介绍使用和对各个进行说明。

基本使用
在xml添加引入SwipeRefreshLayout的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refreshLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!">

        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

然后在MainActivy设置，下拉刷新的回调即可

mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        //模拟网络请求需要3000毫秒，请求完成，设置setRefreshing 为false
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mSwipeRefreshLayout.setRefreshing(false);
            }
        }, 3000);
    }
});

SwipeRefreshLayout 还提供了一些方法设置进度的样式，滑动的开始位置和结束位置等

方法名	作用
setSize(int size)	设置进度View样式的大小，只有两个值DEFAULT和LARGE
–	–
setProgressViewOffset(boolean scale, int start, int end)	设置进度View下拉的起始点和结束点，scale 是指设置是否需要放大或者缩小动画
–	–
setProgressViewEndTarget(boolean scale, int end)	设置进度View下拉的结束点，scale 是指设置是否需要放大或者缩小动画
–	–
setColorSchemeColors(@ColorInt int… colors) }	设置进度View的组合颜色，在手指上下滑时使用第一个颜色，在刷新中，会一个个颜色进行切换
–	–
setDistanceToTriggerSync(int distance)	设置触发刷新的距离
–	–
setOnChildScrollUpCallback(@Nullable OnChildScrollUpCallback callback)	如果child是自己自定义的view，可以通过这个回调，告诉swipeRefreshLayoutchild是否可以滑动

用法使用举例
//设置进度View样式的大小，只有两个值DEFAULT和LARGE
mSwipeRefreshLayout.setSize(mSetSizeBean.size);
//设置进度View下拉的起始点和结束点，scale 是指设置是否需要放大或者缩小动画
mSwipeRefreshLayout.setProgressViewOffset(true, -0, 100);
//设置进度View下拉的结束点，scale 是指设置是否需要放大或者缩小动画
mSwipeRefreshLayout.setProgressViewEndTarget(true, 180);
//设置进度View的组合颜色，在手指上下滑时使用第一个颜色，在刷新中，会一个个颜色进行切换
mSwipeRefreshLayout.setColorSchemeColors(Color.BLACK, Color.GREEN, Color.RED, Color.YELLOW, Color.BLUE);

//设置触发刷新的距离
mSwipeRefreshLayout.setDistanceToTriggerSync(200);
//如果child是自己自定义的view，可以通过这个回调，告诉mSwipeRefreshLayoutchild是否可以滑动
mSwipeRefreshLayout.setOnChildScrollUpCallback(null);

实际效果代码链接
https://github.com/etwge/PracticeExample/tree/master/SwipeRefreshLayoutDemo
效果图：
在这里插入图片描述
注释：增加
SwipeRefreshLayout+Recyclerview实现下拉刷新和上拉自动加载
https://www.jianshu.com/p/96f14f6a5bb4

Toolbar

https://blog.csdn.net/da_caoyuan/article/details/79557704

Toolbar 的基本用法
常用的方法
xml中的设置：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:title="标题"
        app:titleTextColor="@color/white">
 </android.support.v7.widget.Toolbar>

代码中的设置:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("标题");
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setNavigationIcon(R.drawable.ic_back_white_24dp);

        //点击左边返回按钮监听事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

全面但包括不太常用的用法

xml中的配置：

<!--   navigationIcon  左边返回箭头图标
       navigationContentDescription 目前还不知道其作用
       titleMarginStart  标题距离(开始)左边的距离
       -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:logo="@mipmap/ic_launcher"
        app:navigationContentDescription=""
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:subtitle="子标题"
        app:subtitleTextColor="@color/white"
        app:title="标题"
        app:titleMarginStart="90dp"
        app:titleTextColor="@color/white">

同样如果不在xml中设置参数的话，代码中的设置:

注意事项：

1：如果你添加了这行代码 setSupportActionBar(toolbar); 那么 toolbar.setNavigationOnClickListener监听方法，要放到其后面，否则点击事件，监听不到的。如果你用不到ActionBar的一些特性的话，建议setSupportActionBar(toolbar); 这行代码不用添加了。

如果你想修改主标题和子标题的文字大小，你可通过如下方式：

首先定义一个style：

 <!--主标题-->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
       <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">15sp</item>
    </style>

 <!--子标题-->
<style name="ToolbarSubtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">10sp</item>
    </style>

然后：

<!-- app:titleTextAppearance="@style/ToolbarTitle"-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:logo="@mipmap/ic_launcher"
        app:navigationContentDescription=""
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:subtitle="子标题"
        app:subtitleTextColor="@color/white"
        app:title="标题"
        app:titleMarginStart="90dp"
        app:titleTextAppearance="@style/ToolbarTitle"
        app:titleTextColor="@color/white">

效果图这里不在贴出了，通过app:titleTextAppearance=”@style/ToolbarTitle”方法的设置，就能修改标题字体的大小，当然文字颜色也可以修改。

到这里，你可能要问了，如果，我想要标题居中，怎么办呢？查看api，toolbar没有使其居中的方法，也就提供了使其距左右，上下边距大小的方法。不过不用担心，这里还是有办法的。看如下代码：

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="标题"
            android:textColor="@color/white"
            android:textSize="22sp" />

    </android.support.v7.widget.Toolbar>

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

注意：此时 TextView 控件的宽和高都是自适应大小，java 代码中此行代码setSupportActionBar(toolbar);就不要添加了，否则就会显示不正常。如果你非要添加setSupportActionBar(toolbar);这行代码的话，TextView 控件的宽要用match_parent属性。这里再次建议setSupportActionBar(toolbar);这行代码就不要点添加了。
至于它的作用，在此做一下简单的说明吧：
1）在Toolbar这个控件出现之前，其实我们也可以通过 ActionBar actionBar = getSupportActionBar(); 方法获取到acitonbar，（前提你的activity主题theme，是采用的带actionbar的主题，如果你采用这样的主题android:theme="@style/Theme.AppCompat.Light.NoActionBar">拿到的actionBar也是 null,显然是不行的）之后你就可以采用诸如下面的方面来操作actionbar啦。

ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowTitleEnabled(true);
            actionBar.setTitle("主标题");
               ......
        } else {
            Log.i(TAG, "onCreate: actionBar is null");
        }

但是，原生自带的ActionBar设置的灵活性，还是有限，因此Toolbar 这个控件，也就应运而生啦！此时，有的小伙伴说了，我虽然使用了Toolbar来代替ActionBar，但是我还想使用ActionBar的一些特性怎么办呢？这个时候 setSupportActionBar(toolbar);就发挥其作用啦。添加这行代码，你的toolbar可以说也就具有了ActionBar的相关属性了。好啦，到此setSupportActionBar(toolbar) 的作用也讲完了。如果你还不太明白的话，可以参考一下篇文章：
ActionBar和Toolbar的基础使用

结合menu配置文件的用法。
这里先看一下效果图：
在这里插入图片描述

首先在menu文件夹中，创建名为 menu.xml 文件（文件名随意的）：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_delete_white_24dp"
        android:title="notifications"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

然后在代码中这样加载该menu文件即可：

toolbar.inflateMenu(R.menu.menu);

最后运行代码，就是上图的效果。

在这里，app:showAsAction 属性还是很有必要介绍一下滴。
app:showAsAction 有以下三个属性：

ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中
never表示永远不显示在Toolbar中，而是一直显示在菜单中
always 表示永远显示在Toolbar中，如果屏幕空间不够则不显示

注意:Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字。

那如果设置了ifRoom 属性之后，既然只显示图标不显示文字，那还设置 android:title=”Search” 文字干嘛呢?如果你设置了之后，虽然不显示，但是你长按相应按钮后，就会吐司相应文字内容的。

细心的你可能发现还有些不足的地方，就是上图的点击菜单选项时，弹出的菜单位置有点太靠上啦，能不能设置呢，还有菜单的背景和文字颜色能不能设置呢？答案当然是可以的！

首先设置好样式：

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
         <!--<item name="android:colorBackground">#000000</item>--> <!--这里可以改变菜单的背景色-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item，用于控制menu-->
    </style>

    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
    </style>

然后直接在这里引用就可以了： app:popupTheme=”@style/ToolbarPopupTheme”

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:popupTheme="@style/ToolbarPopupTheme">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="标题"
            android:textColor="@color/white"
            android:textSize="22sp" />

    </android.support.v7.widget.Toolbar>

效果图：
在这里插入图片描述

TabLayout

https://www.jianshu.com/p/fde38f367019
https://www.cnblogs.com/lyd447113735/p/8693931.html

简单使用

xml中的配置：

<android.support.design.widget.TabLayout
    android:id="@+id/mytab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ></android.support.design.widget.TabLayout>

在java代码中添加Tab实现选项卡效果

package com.contentprovide.liuliu.tablayout_demo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    TabLayout mytab;


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

        mytab = (TabLayout) findViewById(R.id.mytab);

        mytab.addTab(mytab.newTab().setText("选项卡一").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡二").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡三").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡四").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡五").setIcon(R.mipmap.ic_launcher));
        mytab.addTab(mytab.newTab().setText("选项卡六").setIcon(R.mipmap.ic_launcher));


    }



}

一些效果属性

设置字体默认颜色： app:tabTextColor="#ffffff"
设置字体被选中后的颜色： app:tabSelectedTextColor="#e40707"
设置指示器颜色： app:tabIndicatorColor="#30e407"
设置指示器高度（如果希望选项卡不显示指示器效果只需要把指示器高度设置为0就行了）：app:tabIndicatorHeight=“2dp”
设置Tab背景颜色（作用效果和Background一样）：app:tabBackground="@color/colorye"
设置Tab滚动方式：可滚动：app:tabMode=“scrollable” 固定：app:tabMode=“fixed”

TabLayout的监听事件
mytab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// 添加选中Tab的逻辑
}

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

// 添加未选中Tab的逻辑
}

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

// 再次选中tab的逻辑
}
});

Fragment+ViewPager+TabLayout实现

public class MainActivity extends AppCompatActivity {

    TabLayout mytab;
    ViewPager mViewPager;
    List<String> mTitle;
    List<Fragment> mFragment;

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

        mytab = (TabLayout) findViewById(R.id.mytab);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);

        mTitle = new ArrayList<>();
        mTitle.add("选项卡一");
        mTitle.add("选项卡二");
        mTitle.add("选项卡三");
        mTitle.add("选项卡四");

        mFragment = new ArrayList<>();
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());
        mFragment.add(new Fragment());

        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }

            @Override
            public int getCount() {
                return mFragment.size();
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitle.get(position);
            }
        });

//绑定VIewPager和TabLayout
        mytab.setupWithViewPager(mViewPager);

    }


}

实现选项卡的选项不但有文字还要有图片，并且选中的选项中的文字和图片要进行变色。
我们需要给选项卡设置图片就需要把选项卡的内容给清空，使用下面的方法

tab.removeAllTabs();

接下来就可以给选项卡设置文字和图片了，这里的方法和一开始写的是一样的。下面的tab是我自定义的TabLayout对象

TabLayout.Tab tt;
        for (int i = 0; i < 3; i++) {
            tt = tab.newTab();
            tt.setText(Tab_title.get(i).toString());
            tt.setIcon(getResources().getDrawable((Integer) Tab_Icon.get(i)));
            tab.addTab(tt, i);
        }

扩展:显示各种样式：
https://www.jianshu.com/p/fde38f367019
效果图：
在这里插入图片描述

NavigationView

https://www.jianshu.com/p/e13664d9555f
，material design风格的导航抽屉跨越屏幕的全高，并显示在ActionBar上，并与半透明的StatusBar重叠

我们先看下面两个图：
在这里插入图片描述

这两个图正是由于风格的不同，但是并不影响NavigationView的使用。
使用
这个案例中我们是将ToolBar与DrawerLayout结合，
不了解的可以点击进去看看：ToolBar

创建布局：activity_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- This DrawerLayout has two children at the root  -->
<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">

    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <FrameLayout
                android:id="@+id/flContent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </LinearLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/nvView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/drawer_view"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

注：如果我们想要覆盖ToolBar 的样式那么跟布局就必须是DrawerLayout同时要将toolbar移至FrameLayout上面

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>

drawer_view.xml 抽屉菜单布局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_first_fragment"
            android:icon="@drawable/lable_one"
            android:checked="true"
            android:title="First" />
        <item
            android:id="@+id/nav_second_fragment"
            android:icon="@drawable/lable_two"
            android:title="Second" />
        <item
            android:id="@+id/nav_third_fragment"
            android:icon="@drawable/lable_three"
            android:title="Third" />
        <item android:title="Sub items">
            <menu>
                <group android:checkableBehavior="single">
                    <item
                        android:id="@+id/nav_four"
                        android:icon="@drawable/lable_two"
                        android:title="Sub item 1" />
                    <item
                        android:id="@+id/nav_five"
                        android:icon="@drawable/lable_three"
                        android:title="Sub item 2" />
                </group>
            </menu>
        </item>
    </group>
</menu>

创建Activity ：NavigationViewSimple.class

/**
 * Created by 泅渡者
 * Created on 2017/10/18.
 */

public class NavigationViewSimple extends AppCompatActivity {
    private DrawerLayout mDrawer;
    private Toolbar toolbar;
    private NavigationView nvDrawer;
    private ActionBarDrawerToggle toggle;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Find our drawer view
        mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        toggle = setupDrawerToggle();

        nvDrawer = (NavigationView) findViewById(R.id.nvView);
        mDrawer.addDrawerListener(toggle);
        setupDrawerContent(nvDrawer);


    }

    private ActionBarDrawerToggle setupDrawerToggle() {
        return new ActionBarDrawerToggle(this, mDrawer, toolbar, R.string.drawer_open, R.string.drawer_close);
    }

    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        selectDrawerItem(menuItem);
                        return true;
                    }
                });
    }

    public void selectDrawerItem(MenuItem menuItem) {

        Fragment fragment = null;
        switch (menuItem.getItemId()) {
            case R.id.nav_first_fragment:
                fragment = PageFragment.newInstance(1);
                break;
            case R.id.nav_second_fragment:
                fragment = PageFragment.newInstance(2);
                break;
            case R.id.nav_third_fragment:
                fragment = PageFragment.newInstance(3);
                break;
            case R.id.nav_four:
                fragment = PageFragment.newInstance(4);
                break;
            default:
                fragment = PageFragment.newInstance(5);
        }
        // 插入Fragment
        FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();

        // 改变状态
        menuItem.setChecked(true);
        // 改变标题
        setTitle(menuItem.getTitle());
        // 关闭抽屉
        mDrawer.closeDrawers();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (toggle.onOptionsItemSelected(item)) {
            return true;
        }
        switch (item.getItemId()) {
            case android.R.id.home:
                mDrawer.openDrawer(GravityCompat.START);
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // 同步切换状态恢复实例后状态
        toggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        //通过任何配置更改的抽屉
        toggle.onConfigurationChanged(newConfig);
    }
}

这里有两个比较少用的方法：
onPostCreate()：当Activity彻底运行起来之后回调onPostCreate方法.
onConfigurationChanged():一半是屏幕发生横竖屏切换时调用，这里用来通知ActionBarDrawerToggle ，改变自己状态。
同时为了看到侧滑菜单的点击效果，我这里创建了一个PageFragment，这个大家可以随意创建。我就不多写了。
好了我们看下运行后的效果。
在这里插入图片描述

代码地址

Material Design（一）：material Design 的主题以及取色板的使用
https://blog.csdn.net/weixin_41729259/article/details/89554791

米粒蜗牛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Material Design（二）（控件）

Material Design （控件）引入包：compile ‘com.android.support:appcompat-v7:25.3.1’compile ‘com.android.support:design:25.3.1’Material Design（一）：material Design 的主题以及取色板的使用https://blog.csdn.net/weixin_41...
复制链接

扫一扫