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.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);
	}
}







  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值