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;
@Override
protected 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() {
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
if ("Radius".equals(method)) {
cardView.setRadius(progress);
} else if ("Elevation".equals(method)) {
cardView.setCardElevation(progress);
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public 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;
}
@Override
public int getItemCount() {
return mDatas.size();
}
@Override
public void onBindViewHolder(final ViewHolder viewHolder, final int position) {
viewHolder.itemIV.setImageResource(mDatas.get(position));
//item的cardview被点击时,外部设置的条目监听调用
viewHolder.itemCV.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(null!=mItemClickListener){
mItemClickListener.itemClick(viewHolder.itemView, position);
}
}
});
}
@Override
public 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() {
@Override
public 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;
@Override
protected 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() {
@Override
public 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() {
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
if ("Radius".equals(method)) {
cardView.setRadius(progress);
} else if ("Elevation".equals(method)) {
cardView.setCardElevation(progress);
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}