android 5.0+原生质设计，cardview、Recyclerview、百分比布局PercentRelativeLayout简单使用

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.CardViewxmlns: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" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent" ><ImageViewandroid: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" /><TextViewandroid: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><LinearLayoutandroid: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" ><SeekBarandroid:id="@+id/sb1"android:layout_width="0dp"android:layout_height="30dp"android:layout_weight="1" /><SeekBarandroid: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.RecyclerViewandroid: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.CardViewandroid: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" ><ImageViewandroid: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.CardViewxmlns: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" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent" ><ImageViewandroid: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" /><TextViewandroid: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><LinearLayoutandroid: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" ><SeekBarandroid:id="@+id/sb1"android:layout_width="0dp"android:layout_height="30dp"android:layout_weight="1" /><SeekBarandroid:id="@+id/sb2"android:layout_width="0dp"android:layout_height="30dp"android:layout_weight="1" /></LinearLayout><android.support.v7.widget.RecyclerViewandroid: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);}
}

android 5.0+原生质设计，cardview、Recyclerview、百分比布局PercentRelativeLayout简单使用相关推荐

RecyclerView多布局的简单使用
RecyclerView多布局的简单 RecyclerView 是在Android5.0之后推出的,是一个比ListView更加灵活更加高效的适配器类型控件.但是RecyclerView不同于其他类型 ...
Android 5.0+(RecycleView、CardView、Palette)
2019独角兽企业重金招聘Python工程师标准>>> Android L 开发者预览支持库提供两个新的Widgets,RecyclerView和CardView.使用这两个Wid ...
Android 11.0 QuickQSPanel添加亮度进度条布局
1.概述在11.0产品进行定制化开发时,在定制化framework上层的SystemUI 虽然和10.0有些差别但是思路是一样的,差别不大而在QuickQSPanel中添加系统亮度条布局思路也是一 ...
RecyclerView（一）综合使用综述（Android 5.0 新特性）
Android RecyclerView(一)综合使用综述(Android 5.0 新特性) RecyclerView是support.v7包中的控件,可以说是ListView和GridView的增强 ...
Android 布局开发之百分比布局、弹性布局
1.百分比布局很简单,超级简单.引用之后就可以使用了. compile 'com.android.support:percent:23+' git地址: https://github.com/Jul ...
氢os android 7.0,迄今最干净的国产安卓7.0系统氢OS体验
原标题:迄今最干净的国产安卓7.0系统氢OS体验在两三年前,国内曾一度掀起UI风,各大厂商都推出自己的UI,有些即使没有自己手机产品,也依旧推出自己的UI,但是好景不长,到如今大多数都销声匿迹.现 ...
android如何看百分比版本,【JAVA】Android百分比布局
开发我人生第一个app的时候,我在想有没有这么一种布局能适应任何手机的分辨率,今天让我们一起来看看Android 百分比布局PercentRelativeLayout. 使用这种布局首先我们要在gra ...
Android 5.0状态栏通知图标的实现
Android 5.0状态栏通知图标的实现我之前的博客文章中有一片是介绍了关于Android5.0 下拉通知栏快捷开关的添加,文章牵扯到一个知识点就是Android 5.0状态栏通知图标的实现.那么 ...
android 边距百分比,Android百分比布局：PercentRelativeLayout
Android百分比布局:PercentRelativeLayout 在最新的Android support包中,增加了开发者期待的百分比布局PercentRelativeLayout和Perc ...

android 5.0+原生质设计，cardview、Recyclerview、百分比布局PercentRelativeLayout简单使用

android 5.0+原生质设计，cardview、Recyclerview、百分比布局PercentRelativeLayout简单使用相关推荐

最新文章

热门文章