Android support library支持包常用控件介绍(二)

谷歌官方推出Material Design 设计理念已经有段时间了，为支持更方便的实现
Material Design设计效果，官方给出了Android support design library 支持库，让开发者更容易的实现材料设计的效果。顺便推荐官方的一个图标库：Material Icons

以上请参阅：Android support library支持包常用控件介绍(一)

以下控件为v7包中

以下控件为v4包中

一、BottomSheetBehavior

• compile ‘com.android.support:design:23.2.1’

*
Bottom Sheets控件，一个底部表，就是我们经常在分享或者地图、音乐等app看到的效果。

下面说下具体实现:

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:behavior_peekHeight="50dp"
        app:layout_behavior="@string/bottom_sheet_behavior"
        >
        <!-- NestedScrollView里设置你的底部表长什么样的-->

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

            <TextView
                android:id="@+id/tv"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="?attr/colorAccent"
                android:gravity="center"
                android:text="点击 或者 拖动我"
                android:textColor="@android:color/white"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:layout_margin="10dp"
                android:src="@drawable/header"/>

            <ImageView
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/header"/>

        </LinearLayout>


    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

java代码：

 // The View with the BottomSheetBehavior
        CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.cl);
        View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
        final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                //这里是bottomSheet 状态的改变，根据slideOffset可以做一些动画
                Log.i("TAG", "newState--->" + newState);
//                ViewCompat.setScaleX(bottomSheet,1);
//                ViewCompat.setScaleY(bottomSheet,1);
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                //这里是拖拽中的回调，根据slideOffset可以做一些动画
                Log.i("TAG", "slideOffset=====》" + slideOffset);

            }
        });

        findViewById(R.id.tv).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (behavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
                    behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                } else {
                    behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                }
            }
        });

• 通过附加一个BottomSheetBehavior 给CoordinatorLayout的子视图，上文xml中的是NestedScrollView(adding app:layout_behavior = ” android.support.design.widget.BottomSheetBehavior”)，当然，RecyclerView也是可以的。

  • app:behavior_hideable=”true”
  • app:behavior_peekHeight=”50dp”

• peekHeight是当Bottom Sheets关闭的时候，底部下表我们能看到的高度，hideable 是当我们拖拽下拉的时候，bottom sheet是否能全部隐藏。 如果你需要监听Bottom Sheets回调的状态，可以通过setBottomSheetCallback来实现，onSlide方法是拖拽中的回调，根据slideOffset可以做一些动画 onStateChanged方法可以监听到状态的改变,总共有5种:

• STATE_COLLAPSED: 关闭Bottom Sheets,显示peekHeight的高度，默认是0

• STATE_DRAGGING: 用户拖拽Bottom Sheets时的状态
• STATE_SETTLING: 当Bottom Sheets view释放时记录的状态。
• STATE_EXPANDED: 当Bottom Sheets 展开的状态
• STATE_HIDDEN: 当Bottom Sheets 隐藏的状态

二、RecyclerView

• compile ‘com.android.support:appcompat-v7:23.2.1’

• RecylerView是support-v7包中的新组件，是一个强大的滑动组件，与经典的ListView相比，同样拥有item回收复用的功能，这一点从它的名字recylerview即回收view也可以看出。

recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
LinearLayoutManager layoutManager = new LinearLayoutManager(this );
//设置布局管理器
recyclerView.setLayoutManager(layoutManager);
//设置为垂直布局，这也是默认的
layoutManager.setOrientation(OrientationHelper. VERTICAL);
//设置Adapter
recyclerView.setAdapter( recycleAdapter);
 //设置分隔线
recyclerView.addItemDecoration( new DividerGridItemDecoration(this ));
//设置增加或删除条目的动画
recyclerView.setItemAnimator( new DefaultItemAnimator());

现在说下RecyclerView的常用操作，强烈推荐使用RecyclerView替代ListView。

    private RecyclerView recyclerView;
    private MyrecycleAdapter recycleAdapter;


    List<String> mData = new ArrayList<>();
        for (int i = 0;i<50;i++){
            mData.add("我是第"+(i+1)+"个");
        }
        recycleAdapter = new MyrecycleAdapter(mData);
        recyclerView = (RecyclerView) findViewById(R.id.rcyl_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this );
        //设置布局管理器
        recyclerView.setLayoutManager(layoutManager);
        //设置为垂直布局，这也是默认的
        layoutManager.setOrientation(OrientationHelper.VERTICAL);
        //设置Adapter
        recyclerView.setAdapter(recycleAdapter);

adapter:

 class MyrecycleAdapter extends RecyclerView.Adapter<MyrecycleAdapter.MyViewHolder>{

        List<String> mData = new ArrayList<>();
        public MyrecycleAdapter(List<String> mData){
            this.mData = mData;
        }

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

            View view = View.inflate(parent.getContext(),R.layout.item_view,null);
            MyViewHolder holder= new MyViewHolder(view);
            return holder;

        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {

            holder.tv.setText(mData.get(position));
        }

        @Override
        public int getItemCount() {

            return mData.size();
        }
         class MyViewHolder extends RecyclerView.ViewHolder{

             TextView tv;
             public MyViewHolder(View itemView) {
                 super(itemView);
                 tv = (TextView) itemView.findViewById(R.id.tv);
             }

         }
    }

xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:scrollbarAlwaysDrawVerticalTrack="true"
    android:id="@+id/rcyl_view"
    android:layout_height="match_parent"/>

item_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView  xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/tv"
        android:textSize="22sp"
        android:textColor="#000"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:gravity="center"/>

RecyclerView.Adapter，需要实现3个方法：

1. onCreateViewHolder()
   这个方法主要生成为每个Item inflater出一个View，但是该方法返回的是一个ViewHolder。该方法把View直接封装在ViewHolder中，然后我们面向的是ViewHolder这个实例，当然这个ViewHolder需要我们自己去编写。直接省去了当初的convertView.setTag(holder)和convertView.getTag()这些繁琐的步骤。
2. onBindViewHolder()
   这个方法主要用于适配渲染数据到View中。方法提供给你了一个viewHolder，而不是原来的convertView。
3. getItemCount()
   这个方法就类似于BaseAdapter的getCount方法了，即总共有多少个条目。

这里只是介绍下RecyclerView的基本常用操作，具体细节请参照博客：
* http://blog.csdn.net/lmj623565791/article/details/45059587

三、SwipeRefreshLayout

• compile ‘com.android.support:appcompat-v7:23.2.1’

• google自己推出的下拉刷新组件SwipeRefreshLayout。

沿用RecycleView的例子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_height="match_parent"
    android:id="@+id/swipe_container"
    android:layout_width="match_parent">

    <android.support.v7.widget.RecyclerView
        android:orientation="vertical"
        android:scrollbarAlwaysDrawVerticalTrack="true"
        android:id="@+id/rcyl_view"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>

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

final SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.swipe_container);
               //设置刷新时动画的颜色，可以设置4个
       swipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_green_light);

        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                recyclerView.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mData.add(0,"aaaa");
                        mData.add(0,"aaaa");
                        mData.add(0, "aaaa");

                        recycleAdapter.notifyDataSetChanged();

                        swipeRefreshLayout.setRefreshing(false);
                    }
                },2000);
            }
        });

除了OnRefreshListener接口外，SwipRefreshLayout中还有一些其他重要的方法，具体如下：

    1、setOnRefreshListener(SwipeRefreshLayout.OnRefreshListener listener):设置手势滑动监听器。

     2、setProgressBackgroundColor(int colorRes):设置进度圈的背景色。

     3、setColorSchemeResources(int… colorResIds):设置进度动画的颜色。

     4、setRefreshing(Boolean refreshing):设置组件的刷洗状态。

     5、setSize(int size):设置进度圈的大小，只有两个值：DEFAULT、LARGE

四、CardView

• compile ‘com.android.support:appcompat-v7:23.2.1’

• CardView继承至FrameLayout类,可以在一个卡片布局中一致性的显示内容,卡片可以包含圆角和阴影。经常在ListView和RecyclerView的Item布局中，作为一种容器使用。

CardView 提供了一个默认的elevation，也就是Z轴的阴影。和圆角角度，每一个卡片都能够在不同的设备上保持相同的外观。

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="8dp">

<!-- Content View-->

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

• cardElevation属性被用来决定阴影的大小和柔和度。

1.增加波纹点击效果

//添加如下属性
 android:clickable="true"
 android:foreground="?android:attr/selectableItemBackground"

使用android:foreground=”?android:attr/selectableItemBackground”可以使CardView点击产生波纹效果，由触点向外扩散。目前测试仅在5.0以后系统有效。

2.保持兼容性(对更早版本的支持)

在Android L 之前的设备上，CardView为了支持圆角效果加上了padding。对阴影效果来说，在Android L 之前，也会提供padding去绘制阴影面积，这些内容的padding是和elevation的属性相关的：

• padding的值：

  • 左右两边的值 = maxCardElevation + (1 - cos45)*cornerRadius
  • 上下两边的值 = maxCardElevation * 1.5 + (1 - cos45)*cornerRadius

• 如果你想要给自己的内容加上padding的话，需使用新属性:
  card_view:contentPadding

• 如果改变CardView的背景，也需要使用新属性：
  card_view:cardBackgroundColor
• cardMaxElevation:最大卡片阴影的宽度

注意：

关于Android 5.0以上使用v7包的CardView没有阴影效果的问题。在CardView添加如下属性即可：

    card_view:cardPreventCornerOverlap="true"
    card_view:cardUseCompatPadding="true"

五、Palette

• compile ‘com.android.support:palette-v7:22.2.0’

Palette类是Android5.0引进来的一个获取Bitmap颜色值的类。也在v7 Library包中。

// 用来提取颜色的Bitmap
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));
        // Palette的部分 同步
        Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
            /**
             * 提取完之后的回调方法
             */
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch vibrant = palette.getVibrantSwatch();

            }
        });
        //异步
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener(){
        @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch vibrant = palette.getVibrantSwatch();//有活力
                if(vibrant != null){
                    //vibrant.getRgb();
                    //vibrant.getTitleTextColor
                }

            }

        })

工具方法：

/**
     * 颜色加深处理
     *
     * @param RGBValues
     *            RGB的值，由alpha（透明度）、red（红）、green（绿）、blue（蓝）构成，
     *            Android中我们一般使用它的16进制，
     *            例如："#FFAABBCC",最左边到最右每两个字母就是代表alpha（透明度）、
     *            red（红）、green（绿）、blue（蓝）。每种颜色值占一个字节(8位)，值域0~255
     *            所以下面使用移位的方法可以得到每种颜色的值，然后每种颜色值减小一下，在合成RGB颜色，颜色就会看起来深一些了
     * @return
     */
    private int colorBurn(int RGBValues) {
        int alpha = RGBValues >> 24;
        int red = RGBValues >> 16 & 0xFF;
        int green = RGBValues >> 8 & 0xFF;
        int blue = RGBValues & 0xFF;
        red = (int) Math.floor(red * (1 - 0.1));
        green = (int) Math.floor(green * (1 - 0.1));
        blue = (int) Math.floor(blue * (1 - 0.1));
        return Color.rgb(red, green, blue);
    }

对图像的处理有可能是耗时操作，因此Palette类获得的颜色通过onGenerated回调的方法来获取。
Palette类获得的颜色值有以下几种类型：

Palette.Swatch a =

palette.getVibrantSwatch();//有活力
palette.getDarkVibrantSwatch();//有活力  暗色
palette.getLightVibrantSwatch();//有活力 亮色
palette.getMutedSwatch();//柔和
palette.getDarkMutedSwatch();//柔和 暗色
palette.getLightMutedSwatch();//柔和 亮色

a.getBodyTextColor();//内容颜色
a.getTitleTextColor();//标题颜色
a.getRgb();//rgb颜色

五、DrawerLayout

• compile ‘com.android.support:appcompat-v7:23.2.1’

注：因为v7中包含v4包，故这里导入的v7.

• 侧滑抽屉效果的DrawerLayout。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <!-- -->
    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    tools:context="com.tf.globalapplication.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <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/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways" />
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

java:

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

 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        //drawer.setDrawerListener(toggle);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

• android:layout_gravity=”start” 表示侧滑栏在左侧。end为在右侧。