我們在手機(jī)上查看相冊時(shí)，首先看到的是網(wǎng)格狀的圖片展示界面，然后我們選擇想要欣賞的照片點(diǎn)擊進(jìn)入，這樣就可以全屏觀看該照片，并且可以通過左右滑動來切換照片。如下圖的顯示效果：
實(shí)現(xiàn)Activity之間的跳轉(zhuǎn)以及照片標(biāo)記位置的傳遞需要用到intent，并分別使用putExtra以及getExtra，傳入和獲取照片的標(biāo)記位置。
（關(guān)于intent，后期會有專門博文介紹具體使用，請大家持續(xù)關(guān)注哦）
下面我們開始功能的實(shí)現(xiàn)：
第一步：Layout中建立首頁GridView布局grid_layout.xml文件：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <GridView android:id="@+id/gv" android:layout_width="match_parent" android:layout_height="wrap_content" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:gravity="center" android:horizontalSpacing="10dp"></GridView></LinearLayout>
第二步：Layout中建立GridView布局中每個(gè)item的布局griditem_layout.xml文件：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:maxWidth="280dp" android:maxHeight="280dp" android:src="@mipmap/a1" android:id="@+id/imageView" /></LinearLayout>
這里的設(shè)置需要根據(jù)實(shí)際展示圖片的寬度以及要展示的容器（手機(jī)）分辨率來設(shè)置等比例縮放，避免排版混亂的情況出現(xiàn)。
第三步：Layout中建立圖片展示界面（包含導(dǎo)航圓點(diǎn)）布局activity_main.xml文件：
這里主布局使用FrameLayout，切換實(shí)現(xiàn)布局使用ImageSwitcher，導(dǎo)航圓點(diǎn)使用linearlayout實(shí)現(xiàn)（可通過配置文件實(shí)現(xiàn)）：
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.administrator.switcher.MainActivity"> <ImageSwitcher android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/is"> </ImageSwitcher> <LinearLayout android:id="@+id/point_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@mipmap/default_holo"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@mipmap/default_holo"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@mipmap/default_holo"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@mipmap/default_holo"/> </LinearLayout></FrameLayout>
第四步：Java中Activity的實(shí)現(xiàn)代碼，首頁GridView的實(shí)現(xiàn)代碼GridActivity.java:
本次自定義適配器中g(shù)etview方法已經(jīng)優(yōu)化：
import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.ImageView;public class GridActivity extends AppCompatActivity { private GridView gv; int[] images={R.mipmap.a1,R.mipmap.a2,R.mipmap.a3,R.mipmap.a4}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.grid_layout); gv= (GridView) findViewById(R.id.gv); gv.setAdapter(new MyAdapter()); //設(shè)置單擊GridView中每個(gè)item的單擊事件 gv.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { //使用intend獲取要交互的Activity，也就是將要跳轉(zhuǎn)的界面 Intent intent = new Intent(GridActivity.this,MainActivity.class); //通過intent的putExtra方法獲取點(diǎn)擊圖片的下標(biāo)位置（用于Activity之間數(shù)據(jù)傳輸） intent.putExtra("select",position); //啟動要交互的Activity（通過傳入包含該Activity的intent） startActivity(intent); } }); } class MyAdapter extends BaseAdapter{ @Override public int getCount() { return images.length; } @Override public Object getItem(int position) { return images[position]; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder vh; if(convertView==null){ convertView=getLayoutInflater().inflate(R.layout.griditem_layout,null); vh= new ViewHolder(); vh.iv= (ImageView) convertView.findViewById(R.id.imageView); convertView.setTag(vh); } vh= (ViewHolder) convertView.getTag(); vh.iv.setImageResource(images[position]); return convertView; } class ViewHolder{ ImageView iv; } }}第五步：Java中Activity的實(shí)現(xiàn)代碼，跳轉(zhuǎn)后的ImageSwicher的實(shí)現(xiàn)代碼MainActivity.java:
import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.MotionEvent;import android.view.View;import android.widget.ImageSwitcher;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.ViewSwitcher;import java.util.ArrayList;/** * Created by panchengjia on 2016/12/05. */public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory,View.OnTouchListener{ private ImageSwitcher is;//聲明ImageSwitcher布局 private LinearLayout point_layout;//聲明導(dǎo)航圓點(diǎn)的布局 //圖片id數(shù)組（需要與GridActivity中的圖片資源數(shù)組一一對應(yīng)） int[] images={R.mipmap.a1,R.mipmap.a2,R.mipmap.a3,R.mipmap.a4}; //實(shí)例化存儲導(dǎo)航圓點(diǎn)的集合 ArrayList<ImageView> points = new ArrayList<>(); int index;//聲明index，記錄圖片id數(shù)組下標(biāo) float startX;//手指接觸屏幕時(shí)X的坐標(biāo)（演示左右滑動） float endX;//手指離開屏幕時(shí)的坐標(biāo)（演示左右滑動） @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //獲取GridActivity中設(shè)置的intent Intent intent = getIntent(); //獲取GridActivity中得到的圖片下標(biāo)，并隨意設(shè)置默認(rèn)值 index = intent.getIntExtra("select",0); is = (ImageSwitcher) findViewById(R.id.is); is.setFactory(this);//通過工廠實(shí)現(xiàn)ImageSwitcher initpoint(); is.setOnTouchListener(this);//設(shè)置觸摸事件 } //初始化導(dǎo)航圓點(diǎn)的方法 private void initpoint() { point_layout= (LinearLayout) findViewById(R.id.point_layout); int count = point_layout.getChildCount();//獲取布局中圓點(diǎn)數(shù)量 for(int i =0;i<count;i++){ //將布局中的圓點(diǎn)加入到圓點(diǎn)集合中 points.add((ImageView) point_layout.getChildAt(i)); } //設(shè)置GridActivity中選中圖片對應(yīng)的圓點(diǎn)狀態(tài)為觸摸實(shí)心狀態(tài) points.get(index).setImageResource(R.mipmap.touched_holo); } //設(shè)選中圖片對應(yīng)的導(dǎo)航原點(diǎn)的狀態(tài) public void setImageBackground(int selectImage) { for(int i=0;i<points.size();i++){ //如果選中圖片的下標(biāo)等于圓點(diǎn)集合中下標(biāo)的id，則改變圓點(diǎn)狀態(tài) if(i==selectImage){ points.get(i).setImageResource(R.mipmap.touched_holo); }else{ points.get(i).setImageResource(R.mipmap.default_holo); } } } //實(shí)現(xiàn)ViewFactory的方法實(shí)例化imageView（這里未設(shè)置ImageView的屬性） @Override public View makeView() { //實(shí)例化一個(gè)用于切換的ImageView視圖 ImageView iv = new ImageView(this); iv.setScaleType(ImageView.ScaleType.FIT_XY); //默認(rèn)展示的第一個(gè)視圖為images[index](主頁面跳轉(zhuǎn)過來的圖片) iv.setImageResource(images[index]); return iv; } @Override public boolean onTouch(View v, MotionEvent event) { //按下屏幕 if(event.getAction()==MotionEvent.ACTION_DOWN){ startX=event.getX();//獲取按下屏幕時(shí)X軸的坐標(biāo) //手指抬起 }else if (event.getAction()==MotionEvent.ACTION_UP){ endX=event.getX(); //判斷結(jié)束坐標(biāo)大于起始坐標(biāo)則為下一張（為避免誤操作，設(shè)置30的判斷區(qū)間） if(startX-endX>30){ //三目運(yùn)算判斷當(dāng)前圖片已經(jīng)為最后一張，則從頭開始 index = index+1<images.length?++index:0; //使用系統(tǒng)自帶的切換出入動畫效果（也可以像ViewFlipper中一樣自定義動畫效果） is.setInAnimation(this,android.R.anim.fade_in); is.setOutAnimation(this,android.R.anim.fade_out); //判斷結(jié)束坐標(biāo)小于于起始坐標(biāo)則為上一張（為避免誤操作，設(shè)置30的判斷區(qū)間） }else if(endX-startX>30){ //三目運(yùn)算判斷當(dāng)前圖片已經(jīng)為第一張，則上一張為數(shù)組內(nèi)最后一張圖片 index = index-1>=0?--index:images.length-1; is.setInAnimation(this,android.R.anim.fade_in); is.setOutAnimation(this,android.R.anim.fade_out); } //設(shè)置ImageSwitcher的圖片資源 is.setImageResource(images[index]); //調(diào)用方法設(shè)置圓點(diǎn)對應(yīng)狀態(tài) setImageBackground(index); } return true; }}本次代碼展示到這里就結(jié)束了，按照前文所講，大家可以嘗試多種實(shí)現(xiàn)方法，本次使用到的intent，后面會有詳細(xì)講述，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
