Android Support Library

最新推荐文章于 2020-09-08 14:21:33 发布

Jack-Chan

最新推荐文章于 2020-09-08 14:21:33 发布

阅读量1.6k

点赞数

分类专栏： Android新特性文章标签： android library support compat design

本文链接：https://blog.csdn.net/axi295309066/article/details/52871845

版权

Android新特性专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Android Support Library介绍

https://zhuanlan.zhihu.com/p/20260335

V4包

控件	功能描述
CoordinatorLayout
CoordinatorLayout.Behavior
CollapsingToolbarLayout
AppBarLayout
TabLayout
Snackbar
TextInputLayout
FloatingActionButton
NavigationView
DrawerLayout	抽屉布局，侧边栏
SwipeRefreshLayout	下拉刷新
NestedScrollView	兼容版的ScrollView
BottomSheet
BottomSheetDialog
RoundedBitmapDrawable	圆角图片
ViewPager

V7包

控件	功能描述
RecyclerView
CardView	卡片控件
Toolbar
GridLayout

Behavior

BottomSheetBehavior

BottomNavigationView

底部导航模式
BottomNavigationBar
BottomDialog

Transitions

android.support.transition

DiffUtil

DiffUtil 是 Android Support Library 24.2.0 中新增的类，用于计算两个集合的差异，并且可以发出一些列适用于 RecyclerView.Adapter 的更新操作

DiffUtil使用教程

使用 DiffUtil 高效更新 RecyclerView

SortedList

一个有序列表（数据集）的实现，可以保持ItemData都是有序的，并(自动)通知列表(RecyclerView)（数据集）中的更改。

自动定向刷新:SortedList

Android Support Library 24.2.0 正式发布

Android Support Library 23.2

SwipeRefreshLayout

mRefreshLayout.setColorSchemeResources(
        android.R.color.holo_blue_bright,
        android.R.color.holo_green_light,
        android.R.color.holo_orange_light,
        android.R.color.holo_red_light);
mRefreshLayout.setProgressBackgroundColor(R.color.refresh_bg);

mRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                mRefreshLayout.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mRefreshLayout.setRefreshing(false);
                    }
                },3000);
            }
        });

1.布局文件，在toolbar中加入一个TextView

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:fitsSystemWindows="true">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textSize="20sp"
                android:text="标题"/>
    </android.support.v7.widget.Toolbar>

<activity
    android:name=".ui.activity.DetailActivity"
    android:parentActivityName=".ui.activity.MainActivity">
    <meta-data
        android:name="android.support.PARENT_ACTIVITY"
        android:value=".ui.activity.MainActivity"/>
</activity>

2.Activity代码，设置title为空字符串

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //自定义布局
        /*getSupportActionBar().setDisplayShowCustomEnabled(true);
        getSupportActionBar().setCustomView();*/

        toolbar.setNavigationIcon(R.drawable.back);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }

toolbar

当然，按照此方法，我们还可以定制toolbar的按钮。修改上面的布局文件如下

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:fitsSystemWindows="true">
         <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textSize="20sp"
            android:text="标题"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_close_white_24dp"
            android:layout_gravity="right"
            android:layout_marginRight="16dp"/>
    </android.support.v7.widget.Toolbar>

添加了一个ImageView，图片是一个白色的叉叉,得到的结果如下：

toolbar

Android开发：最详细的 Toolbar 开发实践总结

Android开发：Translucent System Bar 的最佳实践

Design Support Library

Palette

BottomNavigation

原文链接：http://wuxiaolong.me/2016/10/21/BottomNavigation/?utm_source=tuicool&utm_medium=referral

随着Android 7.1的的发布，相关的开发工具与套件也一起更新了，包括Android Studio 2.2.2与Support Library 25.0.0。这次Support Library实现了Material Design中的Bottom Navigation设计样式。

Bottom Navigation适合3-5个底部菜单，官方规范给的3个菜单设计图是这样的：

更多设计细节规范见：https://material.google.com/components/bottom-navigation.html

3个菜单：

BottomNavigationView

5个菜单：

BottomNavigationView

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemIconTint="@color/bottom_item_text_color"
    app:itemTextColor="@color/bottom_item_text_color"
    app:menu="@menu/menu_bottom_navigation_items"/>

app:itemIconTint：设置菜单图标颜色
app:itemTextColor：设置文本颜色

color/bottom_item_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?android:attr/textColorPrimary" android:state_checked="true"/>
    <item android:color="?android:attr/textColorPrimary" android:state_pressed="true"/>
    <item android:color="?android:attr/textColorSecondary"/>
</selector>

app:menu：设置底部菜单

menu/menu_bottom_navigation_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item1"
        android:checked="true"
        android:icon="@drawable/ic_content_copy_24dp"
        android:title="Text1"/>
    <item
        android:id="@+id/item2"
        android:icon="@drawable/ic_add_24dp"
        android:title="Text2"/>
    <item
        android:id="@+id/item3"
        android:icon="@drawable/ic_link_24dp"
        android:title="Text3"/>
</menu>

实现代码

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavigationView);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.item1:
                break;
            case R.id.item2:
                break;
            case R.id.item3:
                break;
        }
        return false;
    }
});

就是如此简单，可以愉快玩耍去了。

Bottom Navigation源码
其实自己写个这样的底部菜单效果并不难，官方这个，我对那个点击有个动画效果比较感兴趣，应该是一点击就是对图标和文字进行缩放动画，Bottom Navigation源码涉及4个类BottomNavigationView、BottomNavigationPresenter、BottomNavigationMenuView、BottomNavigationItemView，缩放动画在BottomNavigationItemView里，核心代码：

@Override
public void setChecked(boolean checked) {
    mItemData.setChecked(checked);
    ViewCompat.setPivotX(mLargeLabel, mLargeLabel.getWidth() / 2);
    ViewCompat.setPivotY(mLargeLabel, mLargeLabel.getBaseline());
    ViewCompat.setPivotX(mSmallLabel, mSmallLabel.getWidth() / 2);
    ViewCompat.setPivotY(mSmallLabel, mSmallLabel.getBaseline());
    if (mShiftingMode) {
        if (checked) {
            LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams()
            iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
            iconParams.topMargin = mDefaultMargin;
            mIcon.setLayoutParams(iconParams);
            mLargeLabel.setVisibility(VISIBLE);
            ViewCompat.setScaleX(mLargeLabel, 1f);
            ViewCompat.setScaleY(mLargeLabel, 1f);
        } else {
            LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams()
            iconParams.gravity = Gravity.CENTER;
            iconParams.topMargin = mDefaultMargin;
            mIcon.setLayoutParams(iconParams);
            mLargeLabel.setVisibility(INVISIBLE);
            ViewCompat.setScaleX(mLargeLabel, 0.5f);
            ViewCompat.setScaleY(mLargeLabel, 0.5f);
        }
        mSmallLabel.setVisibility(INVISIBLE);
    } else {
        if (checked) {
            LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams()
            iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
            iconParams.topMargin = mDefaultMargin + mShiftAmount;
            mIcon.setLayoutParams(iconParams);
            mLargeLabel.setVisibility(VISIBLE);
            mSmallLabel.setVisibility(INVISIBLE);
            ViewCompat.setScaleX(mLargeLabel, 1f);
            ViewCompat.setScaleY(mLargeLabel, 1f);
            ViewCompat.setScaleX(mSmallLabel, mScaleUpFactor);
            ViewCompat.setScaleY(mSmallLabel, mScaleUpFactor);
        } else {
            LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams()
            iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
            iconParams.topMargin = mDefaultMargin;
            mIcon.setLayoutParams(iconParams);
            mLargeLabel.setVisibility(INVISIBLE);
            mSmallLabel.setVisibility(VISIBLE);
            ViewCompat.setScaleX(mLargeLabel, mScaleDownFactor);
            ViewCompat.setScaleY(mLargeLabel, mScaleDownFactor);
            ViewCompat.setScaleX(mSmallLabel, 1f);
            ViewCompat.setScaleY(mSmallLabel, 1f);
        }
    }
    refreshDrawableState();
}

这里设计一个小的文本mSmallLabel和大的文本mLargeLabel，默认大的是隐藏的，xml如下：

<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="@dimen/design_bottom_navigation_margin"
        android:layout_marginBottom="@dimen/design_bottom_navigation_margin"
        android:duplicateParentState="true" />
    <android.support.design.internal.BaselineLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/design_bottom_navigation_margin"
        android:layout_gravity="bottom|center_horizontal"
        android:duplicateParentState="true">
        <TextView
            android:id="@+id/smallLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/design_bottom_navigation_text_size"
            android:duplicateParentState="true" />
        <TextView
            android:id="@+id/largeLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:textSize="@dimen/design_bottom_navigation_active_text_size"
            android:duplicateParentState="true" />
    </android.support.design.internal.BaselineLayout>
</merge>

mShiftingMode是否是3个菜单标识。
看代码才知道，图标并没有做缩放动画，当4/5个菜单时，文本和图标有6dp距离，即mShiftAmount值，这点设计图有标哦。
没有checked时，图标margin是8dp，当文本mLargeLabel显示，图标和文本margin是6dp，造成图标也缩放的错觉。
其他代码都很简单，不注释了。
好了，如果对Bottom Navigation源码感兴趣，可自行去查看。

demo地址

https://github.com/WuXiaolong/DesignSupportLibrarySample，下载运行，Bottom Navigation入口：左侧菜单-其他组件-Bottom navigation，over。

BottomNavigationView 的使用

BottomNavigationView 很早之前就在 Material Design 中出现了，但是直到 Android Support Library 25 中才增加了 BottomNavigationView 控件。

该控件使用方法如下：

在 build.gradle 文件中增加依赖：

compile 'com.android.support:design:25.0.0'

在 res/menu/ 目录下创建一个 xml 文件（没有该目录则手动创建一个），我将其命名为 navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
 android:id="@+id/add"
 android:icon="@drawable/ic_call_white_24dp"
 android:title="call" />
    <item
 android:id="@+id/delete"
 android:icon="@drawable/ic_announcement_white_24dp"
 android:title="message" />
    <item
 android:id="@+id/setting"
 android:icon="@drawable/ic_settings_white_24dp"
 android:title="setting" />

    <item
 android:id="@+id/me"
 android:icon="@drawable/ic_account_circle_white_24dp"
 android:title="me"/>
</menu>

在布局文件中添加如下代码即可：

<android.support.design.widget.BottomNavigationView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 app:menu="@menu/navigation"/>

注意这里的 app:menu=”@menu/navigation” 引用了刚才创建的菜单文件。

最后，在代码中添加 BottomNavigationView 的事件监听：

navigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    ......
                    return true;
                }
            });

这样就完成了一个简单的 BottomNavigationView 控件。该控件有几个地方需要注意的：

底部导航栏高度默认是 56dp。

菜单元素只能是 3~5 个。如果个数少于3个或者多于5个，则会报错。

icon 的选中颜色默认是 @color/colorPrimary 。当然你也可以使用 app:itemIconTint=”@android:color/white” 来自定义，这样定以后，所有的 icon 颜色都是这个了。

菜单元素文字的默认颜色是 @color/colorPrimary 。你可以使用 app:itemTextColor=”@android:color/white” 自定义。

底部导航栏背景颜色默认是当前样式的背景色（白色/黑色），你可以使用 app:itemBackground=”@android:color/black” 来更改。

写个具体的例子吧。比如新建一个项目，activity_main.xml 布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 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:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="me.qiushui.buttomnavigationdemo.MainActivity">

    <TextView
 android:id="@+id/text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="Hello World!"
 android:textSize="36sp"/>

    <android.support.design.widget.BottomNavigationView
 android:id="@+id/navigation"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 app:itemBackground="@android:color/black"
 app:itemIconTint="@android:color/white"
 app:itemTextColor="@android:color/white"
 app:menu="@menu/navigation"/>
</RelativeLayout>

菜单文件还是沿用开始创建的那个文件（图片资源自己添加）。MainActivity.java 代码如下：

public class MainActivity extends AppCompatActivity {

    TextView mTextView;
    private BottomNavigationView mNavigationView;

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

        mTextView = (TextView) findViewById(R.id.text);
        mNavigationView = (BottomNavigationView) findViewById(R.id.navigation);

        mNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        mTextView.setText(item.getTitle().toString().toUpperCase());
                        return true;
                    }
                });
    }
}

运行效果如下图：

BottomNavigationView

Android Support 25中BottomNavigationView与ViewPager结合实现material Tab标准效果

http://www.jianshu.com/p/4544fb162eaf

Android Support Annotations

android.support.v4.widget.CircleImageView

support v4 中存在一个CircleImageView
android.support.v4.widget.CircleImageView
但是它内部的实现不是裁剪显示圆形图片，只是给设置的图片加上一圈圆形阴影（也就是你设置方形图片也是会直接显示方形图片），所以标注为@ hide的，主要用来给SwipeRefreshLayout下拉出来的那个菊花使用。

SearchView

ShareActionProvider

RenderScript

Jack-Chan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android Support Library

V4包控件功能描述 CoordinatorLayout CoordinatorLayout.Behavior CollapsingToolbarLayout AppBarLayout TabLayout Snackbar TextInputLayout FloatingActionButton Naviga
复制链接

扫一扫