1. 程式人生 > >Android開發學習之卡片式佈局的簡單實現

Android開發學習之卡片式佈局的簡單實現

             GoogleNow是Android4.1全新推出的一款應用,它可以全面瞭解你的使用習慣,併為你提供現在或者未來可能用到的各種資訊,GoogleNow提供的資訊關聯度較高,幾乎是瞬間返回答案,總而言之,GoogleNow是Google提出的全新搜尋概念。當然,GoogleNow最為引人注目的當屬它的卡片式設計。我們首先來看幾張GoogleNow的圖片:

                                        

            我們可以看出,這種卡片式的介面設計更為簡潔,可以將使用者需要的資訊直接地呈現在使用者面前,簡潔而不失美觀。那麼現在我們就來一起做一個這樣的卡片式介面吧!

       首先我們先來建立一個佈局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:background="@drawable/radius_bg"
    android:padding="15dp">
    <TextView
        android:id="@+id/Card_Title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textIsSelectable="true"/>

    <ImageView
        android:id="@+id/Card_Pic"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/Description"
        android:scaleType="center" />

</LinearLayout>
        通過這個佈局我們將完成一個圓角卡片的設計,其中圓角的實現是定義了一個Shape,具體程式碼如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="8dp"/>
    <solid android:color="#ffffff"/>
</shape>
        下面我們定義一個GoogleCard的類:
package com.Android.GoogleCard;

public class GoogleCard 
{

   private String mDescription;
   private int mDrawable;
   
   public GoogleCard(String mDescription,int mDrawable)
   {
	   this.mDescription=mDescription;
	   this.mDrawable=mDrawable;
   }
   
   public String getDescription() 
   {
	return mDescription;
   }
   
   public void setDescription(String mDescription) 
   {
	this.mDescription = mDescription;
   }
   
   public int getDrawable() 
   {
	return mDrawable;
   }
   
   public void setDrawable(int mDrawable) 
   {
	this.mDrawable = mDrawable;
   }

}
       接下里我們定義一個介面卡類GoogleCardAdapter
package com.Android.GoogleCard;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class GoogleCardAdapter extends BaseAdapter 
{
    private List<GoogleCard> mCards;
    private Context mContext;
    
    public GoogleCardAdapter(Context mContext,List<GoogleCard> mCards)
    {
    	this.mContext=mContext;
    	this.mCards=mCards;
    }
	@Override
	public int getCount() 
	{
		return mCards.size();
	}

	@Override
	public Object getItem(int Index) 
	{
		return mCards.get(Index);
	}

	@Override
	public long getItemId(int Index) 
	{
		return Index;
	}

	@Override
	public View getView(int Index, View mView, ViewGroup mParent) 
	{
		ViewHolder mHolder=new ViewHolder();
		mView=LayoutInflater.from(mContext).inflate(R.layout.layout_item, null);
		mHolder.Card_Title=(TextView)mView.findViewById(R.id.Card_Title);
		mHolder.Card_Title.setText(mCards.get(Index).getDescription());
		mHolder.Card_Pic=(ImageView)mView.findViewById(R.id.Card_Pic);
		//記住啊,這裡是setImageResource()方法,不是setBackgroundResource(),否則影象會變形啊
		mHolder.Card_Pic.setImageResource(mCards.get(Index).getDrawable());
		return mView;
	}

    private static class ViewHolder
    {
    	TextView Card_Title;
    	ImageView Card_Pic;
    }
}
       最後我們來看主介面的佈局和主要程式碼:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <ListView
        android:id="@+id/ListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@null"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:dividerHeight="15dp"
        android:scrollbarStyle="outsideOverlay" >
    </ListView>
</LinearLayout>

package com.Android.GoogleCard;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
import android.widget.ListView;

public class MainActivity extends Activity {


	private ListView mListView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.layout_main);
		mListView=(ListView) findViewById(R.id.ListView);
		GoogleCardAdapter mAdapter=new GoogleCardAdapter(this, getItems());
		mListView.setAdapter(mAdapter);
	}

	private List<GoogleCard> getItems() 
	{
		List<GoogleCard> mCards=new ArrayList<GoogleCard>();
		for(int i=0;i<20;i++)
		{
			GoogleCard mCard=new GoogleCard("這是第"+(i+1)+"張卡片", getResource(i));
			mCards.add(mCard);
		}
		return mCards;
	}

	private int getResource(int Index) 
	{
		int mResult=0;
		switch(Index%2)
		{
		  case 0:
			  mResult=R.drawable.card_0;
			break;
		  case 1:
			  mResult=R.drawable.card_1;
			break;
		}
		return mResult;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

         最終程式執行效果如圖所示: