android 5.0+原生质设计，cardview、Recyclerview、百分比布局PercentRelativeLayout简单使用
来源：互联网 发布：程序员数学 编辑：程序博客网 时间：2024/05/01 04:03
Android 5.0出来已经快一年时间了，全新的系统采用Material Design设计，耳目一新的感觉，当然新系统的出来也增加了新的API为开发带来便捷，现在就说说新出的几个控件，cardview，Recyclerview和前段时间刚出的百分比布局，PercentRelativeLayout、PercentFrameLayout。
cardview使用：
首先在工程中引用cardview的lib包，如果不知道cardview的lib在哪里，那么请找到你的SDK目录，进入\sdk\extras\android\support\v7目录下，可以找到appcompat、cardview、gridlayout、mediarouter、palette及recyclerview的lib包，如果在上述目录下没有找到，那么请更新你的support libary库，更新方法：在esclipse下任意工程右键--Android Tolls--Add support libary进行支持库更新，如更新不了请咨询度娘；个人建议，将库包导入到eclipse中，以lib的形式被其它工程引用，最好更改下包名便于管理。言归正传，导入cardview的lib，接下来就可以在我们的布局中进行引用了，见代码：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.cardviewrecyclerview.MainActivity" > <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_width="300dp" android:layout_height="300dp" android:layout_marginBottom="5dp" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="5dp" card_view:cardBackgroundColor="@android:color/white" card_view:cardCornerRadius="22dp" card_view:cardElevation="20dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/picIV" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:contentDescription="@null" android:scaleType="fitCenter" android:src="@drawable/she1" /> <TextView android:id="@+id/desTV" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/picIV" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:text="HIGH CUT — Ha Ji Won" /> </RelativeLayout> </android.support.v7.widget.CardView> <LinearLayout android:id="@+id/seekbarPart" android:layout_width="match_parent" android:layout_height="3dp" android:layout_below="@id/card_view" android:layout_marginTop="20dp" android:orientation="horizontal" > <SeekBar android:id="@+id/sb1" android:layout_width="0dp" android:layout_height="30dp" android:layout_weight="1" /> <SeekBar android:id="@+id/sb2" android:layout_width="0dp" android:layout_height="30dp" android:layout_weight="1" /> </LinearLayout></RelativeLayout>cardview主要提供的属性有圆角cardCornerRadius，背景颜色cardBackgroundColor，阴影cardElevation，根据需要进行设置，为了方便观察效果，用两个seekbar进行动态设置圆角和阴影。
Mainactivity.java
package com.example.cardviewrecyclerview;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import com.example.testcardview.R;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.CardView;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.ImageView;import android.widget.SeekBar;import android.widget.SeekBar.OnSeekBarChangeListener;import android.widget.TextView;public class MainActivity extends AppCompatActivity {private CardView cardView;private ImageView imageView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);cardView = (CardView) findViewById(R.id.card_view);SeekBar sb1 = (SeekBar) findViewById(R.id.sb1);SeekBar sb2 = (SeekBar) findViewById(R.id.sb2);imageView = (ImageView) findViewById(R.id.picIV);sb1.setProgress(60);sb2.setProgress(55);setSeekBarChangeListener(sb1, "Radius");setSeekBarChangeListener(sb2, "Elevation");}/** * 设置seekbar滑动监听，圆角率，阴影 * * @param sb * @param method */private void setSeekBarChangeListener(SeekBar sb, final String method) {sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {}@Overridepublic void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {if ("Radius".equals(method)) {cardView.setRadius(progress);} else if ("Elevation".equals(method)) {cardView.setCardElevation(progress);}}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {int id = item.getItemId();if (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}}OK，效果出来了，见图：
用cardview来展示图片是不是很不错！
RecyclerView使用：
recyclerview可以理解为listview、gridview的升级版，可以实现listview、gridview、gallery效果，本文就只当作横向listview(gallery效果），更多用法可查询github。
导入RecyclerView的库包，然后在布局中引用。
<android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_below="@id/seekbarPart" />
在Activity中初始化：
<pre name="code" class="java">RecyclerView recyclerview = (RecyclerView) findViewById(R.id.recyclerView);//设置layoutManager,设置LinearLayoutManager为水平方向LinearLayoutManager mManager = new LinearLayoutManager(this);mManager.setOrientation(LinearLayoutManager.HORIZONTAL);recyclerview.setLayoutManager(mManager);
Recyclerview的适配器：提供了3个方法，getItemcount(),onCreateViewHolder(),onBindViewHolder()；无需像BaseAdapter一样还需对viewholder进行setTag()或getTag()；另外，Recyclerview没有提供类似BaseAdapter中的onItemClickListener()方法，所以只能自定义了。
package com.example.cardviewrecyclerview;import java.util.List;import com.example.testcardview.R;import android.content.Context;import android.support.v7.widget.CardView;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.ImageView;public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder>{private Context mContext;private List<Integer> mDatas;private LayoutInflater mInflater;private OnItemClickListener mItemClickListener;public CustomAdapter(Context ctx,List<Integer> mDatas){this.mContext = ctx;this.mDatas = mDatas;mInflater = LayoutInflater.from(mContext);}public static class ViewHolder extends RecyclerView.ViewHolder{public ViewHolder(View itemView) {super(itemView);}public ImageView itemIV;public CardView itemCV;}//设置一个条目的点击监听public interface OnItemClickListener{void itemClick(View view, int position);}//外部进行监听的调用public void setOnItemClickListener(OnItemClickListener listener){this.mItemClickListener = listener;}@Overridepublic int getItemCount() {return mDatas.size();}@Overridepublic void onBindViewHolder(final ViewHolder viewHolder, final int position) {viewHolder.itemIV.setImageResource(mDatas.get(position));//item的cardview被点击时，外部设置的条目监听调用viewHolder.itemCV.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if(null!=mItemClickListener){mItemClickListener.itemClick(viewHolder.itemView, position);}}});}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int position) {View view = mInflater.inflate(R.layout.item_recyclerview, parent, false);ViewHolder viewHolder = new ViewHolder(view);viewHolder.itemIV = (ImageView) view.findViewById(R.id.itemIV);viewHolder.itemCV = (CardView) view.findViewById(R.id.itemCV);return viewHolder;}}item的布局R.layout.item_recyclerview.xml，里面也是一个cardview，包裹一个Imageview，为了圆角和阴影效果。
<?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" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" > <android.support.v7.widget.CardView android:id="@+id/itemCV" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" app:cardBackgroundColor="@android:color/white" app:cardCornerRadius="12dp" app:cardElevation="5dp" > <ImageView android:id="@+id/itemIV" android:layout_width="96dp" android:layout_height="96dp" android:contentDescription="@null" android:src="@drawable/she2" /> </android.support.v7.widget.CardView></RelativeLayout>接着给Recyclerview添加适配器及设置监听：
CustomAdapter mAdapter = new CustomAdapter(MainActivity.this, mDatas);recyclerview.setAdapter(mAdapter);mAdapter.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void itemClick(View view, int position) {imageView.setImageResource(mDatas.get(position));desText.setText(mTexts[position]);}});gallery的效果出来了。
百分布局的使用：
引用百分比的库包，在布局中引用，官方仅提供了PercentFrameLayout和PercentRelativeLayout两个百分比widget，根据源码也可自定义PercentLinearLayout。在所在的view中layout_height和layout_width属性值设置为0dp，用layout_heightPercent和layout_widthPercent取代，同时还支持margin属性。
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.cardviewrecyclerview.MainActivity" > <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginBottom="5dp" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="5dp" app:layout_heightPercent="60%" app:layout_widthPercent="100%" card_view:cardBackgroundColor="@android:color/white" card_view:cardCornerRadius="22dp" card_view:cardElevation="20dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/picIV" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:contentDescription="@null" android:scaleType="fitCenter" android:src="@drawable/she1" /> <TextView android:id="@+id/desTV" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/picIV" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:text="HIGH CUT — Ha Ji Won" /> </RelativeLayout> </android.support.v7.widget.CardView> <LinearLayout android:id="@+id/seekbarPart" android:layout_width="0dp" android:layout_height="0dp" android:layout_below="@id/card_view" android:layout_marginTop="20dp" app:layout_heightPercent="10%" app:layout_widthPercent="100%" android:orientation="horizontal" > <SeekBar android:id="@+id/sb1" android:layout_width="0dp" android:layout_height="30dp" android:layout_weight="1" /> <SeekBar android:id="@+id/sb2" android:layout_width="0dp" android:layout_height="30dp" android:layout_weight="1" /> </LinearLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="0dp" android:layout_height="0dp" android:layout_alignParentBottom="true" android:layout_below="@id/seekbarPart" app:layout_heightPercent="25%" app:layout_widthPercent="100%" /></android.support.percent.PercentRelativeLayout>
MainActivity.java全部代码
package com.example.cardviewrecyclerview;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import com.example.cardviewrecyclerview.CustomAdapter.OnItemClickListener;import com.example.testcardview.R;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.CardView;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.ImageView;import android.widget.SeekBar;import android.widget.SeekBar.OnSeekBarChangeListener;import android.widget.TextView;public class MainActivity extends AppCompatActivity {private CardView cardView;private List<Integer> mDatas;private ImageView imageView;private TextView desText;private String[] mTexts;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();cardView = (CardView) findViewById(R.id.card_view);RecyclerView recyclerview = (RecyclerView) findViewById(R.id.recyclerView);SeekBar sb1 = (SeekBar) findViewById(R.id.sb1);SeekBar sb2 = (SeekBar) findViewById(R.id.sb2);imageView = (ImageView) findViewById(R.id.picIV);desText = (TextView) findViewById(R.id.desTV);sb1.setProgress(60);sb2.setProgress(55);setSeekBarChangeListener(sb1, "Radius");setSeekBarChangeListener(sb2, "Elevation");CustomAdapter mAdapter = new CustomAdapter(MainActivity.this, mDatas);LinearLayoutManager mManager = new LinearLayoutManager(this);mManager.setOrientation(LinearLayoutManager.HORIZONTAL);recyclerview.setLayoutManager(mManager);recyclerview.setAdapter(mAdapter);mAdapter.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void itemClick(View view, int position) {imageView.setImageResource(mDatas.get(position));desText.setText(mTexts[position]);}});}private void initData() {mDatas = new ArrayList<Integer>(Arrays.asList(R.drawable.she1,R.drawable.she2, R.drawable.she3, R.drawable.she4,R.drawable.he1, R.drawable.he2, R.drawable.he3, R.drawable.he4));mTexts = new String[] { "HIGH CUT - Ha Ji Won","HIGH CUT - Ha Ji Won", "HIGH CUT - Ha Ji Won","HIGH CUT - Ha Ji Won", "Hyun Bin", "Hyun Bin", "Hyun Bin","Hyun Bin", };}/** * 通过seekbar设置圆角及阴影值 * * @param sb * @param method */private void setSeekBarChangeListener(SeekBar sb, final String method) {sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {}@Overridepublic void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {if ("Radius".equals(method)) {cardView.setRadius(progress);} else if ("Elevation".equals(method)) {cardView.setCardElevation(progress);}}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {int id = item.getItemId();if (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}} 2 0
- android 5.0+原生质设计，cardview、Recyclerview、百分比布局PercentRelativeLayout简单使用
- Android百分比布局：PercentRelativeLayout
- Android百分比布局：PercentRelativeLayout
- android百分比布局PercentRelativeLayout
- android 百分比布局percentFrameLayout,percentRelativeLayout的使用
- 百分比布局PercentRelativeLayout
- PercentRelativeLayout百分比布局
- Android 中简单使用RecyclerView 和CardView
- CardView、RecyclerView简单使用
- 百分比布局（PercentFrameLayout和PercentRelativeLayout）
- Android L 新增UI控件：RecyclerView CardView的简单使用
- Android RecyclerView + CardView的使用
- Android界面百分比适配-PercentRelativeLayout
- Android 使用RecyclerView和CardView,实现知乎日报精致布局
- Android使用RecyclerView和CardView,实现知乎日报精致布局
- Android RecyclerView和CardView的结合使用
- Android RecyclerView、CardView、Palette的使用
- Android RecyclerView与CardView的配合使用
- 搭建Spring MVC环境进行简单的增、删、改、查（二）
- linux常用目录作用
- 构造函数，拷贝构造函数，析构函数
- .Net Sql Server use informix_odbc tips
- redis的PHP封装
- android 5.0+原生质设计，cardview、Recyclerview、百分比布局PercentRelativeLayout简单使用
- adb命令 logcat查看日志
- HDU 5326 公司人员管理树问题（多校）-简单dp
- 浅谈MFC单文档（SDI）程序
- iOS 之选择器（Selector）
- neusoft.shixi__任务一
- 《人工智能教程（张仰森）》（二）
- box草稿2--个人技能发展计划
- select
