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

谷歌官方推出Material Design 设计理念已经有段时间了,为支持更方便的实现

Material Design设计效果,官方给出了Android support design library 支持库,让开发者更容易的实现材料设计的效果。顺便推荐官方的一个图标库:Material Icons

控件名称
NavigationView
FloatingActionButton
TextInputLayout
Snackbar
TabLayout
AppBarLayout
CoordinatorLayout
CollapsingToolbarLayout
Coordinator.Behavior
BottomSheet
BottomSheetDialog

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

控件名称
Bottom Sheet

以下控件为v7包中

控件名称
RecyclerView
CardView
palette

以下控件为v4包中

控件名称
DrawerLayout
SwipeRefreshLayout

一、BottomSheetBehavior

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

*

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

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

下面说下具体实现:

布局文件:

<?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也可以看出。

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

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。

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

沿用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 library支持包常用控件介绍(二)


<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。

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

<?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为在右侧。
上一篇:Android support library支持包常用控件介绍(一)


下一篇:IIS HTTP重定向配置、参数设置