51dev.com IT技术开发者社区

51dev.com 技术开发者社区

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

Android互联网报道阅读(93)2019-06-04 收藏0次评论

谷歌官方推出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看到的效果。

下面说下具体实现:

布局文件:




    
        

        

            

            

            

        


    

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

        List mData = new ArrayList<>();
        public MyrecycleAdapter(List 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:


item_view.xml:


RecyclerView.Adapter,需要实现3个方法:

onCreateViewHolder()
这个方法主要生成为每个Item inflater出一个View,但是该方法返回的是一个ViewHolder。该方法把View直接封装在ViewHolder中,然后我们面向的是ViewHolder这个实例,当然这个ViewHolder需要我们自己去编写。直接省去了当初的convertView.setTag(holder)和convertView.getTag()这些繁琐的步骤。 onBindViewHolder()
这个方法主要用于适配渲染数据到View中。方法提供给你了一个viewHolder,而不是原来的convertView。 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的例子:




    

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轴的阴影。和圆角角度,每一个卡片都能够在不同的设备上保持相同的外观。







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。




    
    

    

app_bar_main.xml:




    

        
        

    

    

    

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支持包常用控件介绍(二)的全部内容,请多关注【51DEV】IT技术开发者社区。