Android - Design Support Library 学习总结 2

1.回顾

(1) 上篇留下来的问题 : 改变状态栏颜色 , 和 图片 侵入状态栏 ?

实现步揍 :

• 第一步 : 实现类
  

  一个大神的实现类,改变状态栏颜色 ; 直接复制到util 包里 即可;

package labelnet.cn.ledou.ui;import android.annotation.TargetApi;import android.app.Activity;import android.content.Context;import android.graphics.Color;import android.os.Build;import android.view.View;import android.view.ViewGroup;public class StatusBarCompat{    private static final int INVALID_VAL = -1;    private static final int COLOR_DEFAULT = Color.parseColor("#20000000");    @TargetApi(Build.VERSION_CODES.LOLLIPOP)    public static void compat(Activity activity, int statusColor)    {        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)        {            if (statusColor != INVALID_VAL)            {                activity.getWindow().setStatusBarColor(statusColor);            }            return;        }        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)        {            int color = COLOR_DEFAULT;            ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);            if (statusColor != INVALID_VAL)            {                color = statusColor;            }            View statusBarView = new View(activity);            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,                    getStatusBarHeight(activity));            statusBarView.setBackgroundColor(color);            contentView.addView(statusBarView, lp);        }    }    public static void compat(Activity activity)    {        compat(activity, INVALID_VAL);    }    public static int getStatusBarHeight(Context context)    {        int result = 0;        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");        if (resourceId > 0)        {            result = context.getResources().getDimensionPixelSize(resourceId);        }        return result;    }}

• 第二步 : 调用

直接放入想要改变状态栏颜色的Activity 中即可;

   StatusBarCompat.compat(this,getResources().getColor(R.color.zhushen_color));  StatusBarCompat.compat(this);

• 第三步 : 没有了 , 这是延伸

1. 想要图片侵入状态栏 ,只需要 不设置 toorbar 或 action bar ;
2. 在 style 中实现 下面即可

<item name="android:windowTranslucentStatus">true</item>

---

(2) 一些总结

包括一些Android开发的绚丽效果和 值得测试使用的 API

杂谈 – 网上的一些值得使用的免费数据API

GitHub 上 Android的 酷炫效果 和 地址

---

2.大纲

(1) 水波纹点击效果实现
(2) google 自带的 下拉刷新 样式 实现 和 模拟
(3) RecyclerView 和 CardView 实现

---

效果图 1:

图片上不是滴水的忽略不计,那个是ubuntu 的桌面效果

---

3. 下拉刷新样式实现

实现步揍 :

• (1) 布局实现

说明 : 外层是 下拉刷新的布局实现 ,里层是 ListView;

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

• (2) 代码实现

说明: 整个 Activity 代码来袭 , 忽略 toolbar 内容 即可;
说明2: 这里模拟listview更新 有两种方式, 自己观察喽;

package labelnet.cn.ledou;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.support.design.widget.Snackbar;import android.support.v4.widget.SwipeRefreshLayout;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.widget.AdapterView;import android.widget.ListView;import android.widget.SimpleAdapter;import android.widget.TextView;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;public class navitionActivity extends AppCompatActivity {    /**     * SwipeRefreshLayout     */    private SwipeRefreshLayout swipe_refresh;    private ListView refresh_listview;    private List<Map<String, String>> datas;    private SimpleAdapter adapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_navition);//        设置toolbar        Toolbar toolbar = (Toolbar) findViewById(R.id.navi_toolbar);        setSupportActionBar(toolbar);        // StatusBarCompat.compat(this,getResources().getColor(R.color.zhushen_color));        // StatusBarCompat.compat(this);        initview();    }    private void initview() {        /**         * 初始化控件         */        swipe_refresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);        refresh_listview = (ListView) findViewById(R.id.refsh_listview);        /**         * 初始化数据         */        datas = new ArrayList<Map<String, String>>();        for (int i = 0; i < 20; i++) {            Map<String, String> map = new HashMap<String, String>();            map.put("key", "labelnet" + i);            datas.add(map);        }        /**         * 初始化适配器         */        adapter = new SimpleAdapter(this, datas, R.layout.list_item_layout                , new String[]{"key"}, new int[]{R.id.tv_list_item});        refresh_listview.setAdapter(adapter);        /**         * 刷新控件 设置         *         */        swipe_refresh.setColorSchemeResources(R.color.zhu_color, R.color.zhushen_color                , R.color.fu_color, R.color.white_color);        swipe_refresh.setSize(SwipeRefreshLayout.LARGE);        swipe_refresh.setProgressViewEndTarget(true, 100);        swipe_refresh.setTop(50);        /**         * 刷新设置 监听         */        swipe_refresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {            @Override            public void onRefresh() {                //在                new Thread(new Runnable() {                    @Override                    public void run() {                        /**                         * 模拟刷新添加5条数据                         */                        for (int i = 0; i < 5; i++) {                            Map<String, String> map = new HashMap<String, String>();                            map.put("key", "yuan" + i);                            datas.add(map);                        }                        /**                         * 延迟5s时间                         */                        try {                            Thread.sleep(5000);                        } catch (InterruptedException e) {                            e.printStackTrace();                        }                        handler.sendEmptyMessage(0x11);                    }                }).start();//                Message message=handler.obtainMessage();//                message.what=0x11;//                handler.sendMessageDelayed(message,5000);            }        });        //listview设置 监听事件        listviewListener listviewListener=new listviewListener();        refresh_listview.setOnItemClickListener(listviewListener);    }    class listviewListener implements AdapterView.OnItemClickListener{        @Override        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {            TextView view1= (TextView) view.findViewById(R.id.tv_list_item);            //通过 SnackBar实现 提醒            Snackbar.make(refresh_listview,view1.getText().toString(),Snackbar.LENGTH_LONG).show();        }    }    /**     * handler     */    private Handler handler=new Handler() {        @Override        public void handleMessage(Message msg) {            /**             * 数据更新完了,开始更新UI             */            if(msg.what==0x11) {                for (int i = 0; i < 5; i++) {                            Map<String, String> map = new HashMap<String, String>();                            map.put("key", "yuan" + i);                            datas.add(map);                        }                //更新ui                adapter.notifyDataSetChanged();                swipe_refresh.setRefreshing(false);            }        }    };}

---

4.水波纹点击效果实现

实现步揍:

• (1). 引入兼容包

GitHub 地址: https://github.com/balysv/material-ripple

  compile 'com.balysv:material-ripple:1.0.2'

• (2) . 使用

使用起来很方便, 下面所示 ,不需要代码设置就行 :

<?xml version="1.0" encoding="utf-8"?><com.balysv.materialripple.MaterialRippleLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:id="@+id/tv_list_item"        android:layout_width="wrap_content"        android:layout_height="50dp" /></com.balysv.materialripple.MaterialRippleLayout>

---

5.RecyclerView 和 CardView 的 使用

效果演示 ：

---

实现步揍 :

• （1）布局实现

  RecyclerView 布局实现 :

 <android.support.v7.widget.RecyclerView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/white_color"        android:id="@+id/recycler_view"        />

CardView 布局实现 :

这里CardView 作为 Recyclerview的item 布局实现；

<?xml version="1.0" encoding="utf-8"?><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:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_margin="5dp"    android:minWidth="400dp"    android:minHeight="200dp"    android:orientation="horizontal"    card_view:cardCornerRadius="5dp">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        >        <ImageView            android:id="@+id/iv_list_item"            android:layout_width="match_parent"            android:layout_height="150dp"            android:scaleType="fitXY"            android:src="@drawable/img_welcome_two"/>        <TextView            android:id="@+id/tv_test_item"            android:layout_width="match_parent"            android:layout_height="50dp"            android:text="yuan"            android:gravity="center"            android:textColor="@color/zhu_color"/>    </LinearLayout></android.support.v7.widget.CardView>

---

• （2）RecyclerView Adapter 实现

(1) 继承 自 RecyclerView.Adapter< ViewHolder>
(2) 故 先实现 ViewHolder , 后实现 Adapter
(3) 实现 下面几个方法

package labelnet.cn.ledou.adpater;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import java.util.List;import labelnet.cn.ledou.R;import labelnet.cn.ledou.util.PictureUtil;/** * Created by yuan on 15-10-23. */public class RecyclerTestAdapter extends RecyclerView.Adapter<RecyclerTestAdapter.TmodelViewHolder> {    private List<String> models;    private Context mcontext;    public RecyclerTestAdapter(List<String> models, Context mcontext) {        this.mcontext = mcontext;        this.models = models;    }    @Override    public TmodelViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {        View view = LayoutInflater.from(viewGroup.getContext())                .inflate(R.layout.list_item_card, viewGroup, false);        view.setTag(models.get(i));        TmodelViewHolder tmode = new TmodelViewHolder(view);        return tmode;    }    @Override    public void onBindViewHolder(TmodelViewHolder tmodelViewHolder, int i) {        tmodelViewHolder.iv_test.setImageBitmap(PictureUtil.readBitMap(mcontext, R.drawable.logo));        tmodelViewHolder.tv_test.setText(models.get(i));    }    @Override    public int getItemCount() {        return models == null ? 0 : models.size();    }    /**     * （1）实现 ViewHolder     */    public static class TmodelViewHolder extends RecyclerView.ViewHolder {        private TextView tv_test;        private ImageView iv_test;        public TmodelViewHolder(View itemView) {            super(itemView);            tv_test = (TextView) itemView.findViewById(R.id.tv_test_item);            iv_test = (ImageView) itemView.findViewById(R.id.iv_list_item);        }    }}

---

• （3） 调用实现

  (1) RecyclerView没有 OnItemClickListener 事件 ；
  (2) 解决 ：操作的时候，可以给ViewHolder设置点击事件
  (3) 参考 ： http://blog.csdn.net/jwzhangjie/article/details/36868515

    private void initView() {        /**         * RecyclerView 使用         */        RecyclerView    recycler_view= (RecyclerView) findViewById(R.id.recycler_view);        // 设置LinearLayoutManager , 控制 横向 还是 纵向        LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this);       // linearLayoutManager.setOrientation(LinearLayout.HORIZONTAL);        recycler_view.setLayoutManager(linearLayoutManager);        /**         * 准备数据         */        List<String> models=new ArrayList<String>();        for (int i=0;i<20;i++){            models.add("yuan"+i);        }        /**         * 设置适配器         */        RecyclerTestAdapter recyclerTestAdapter=new RecyclerTestAdapter(models,this);        recycler_view.setAdapter(recyclerTestAdapter);        for(int i=0;i<models.size();i++){            Log.i("Model", models.get(i));        }    }

6.总结

好吧，绚丽 UI 学习到此为止，项目也耽误了不少时间 ，该开始 布局实现了；

GitHub 地址 :
https://github.com/LABELNET/AndroidStudioDemo/tree/master/LeDou