Android中圖片的左右切換隨處可見,今天我也試著查閱資料試著做了一下,挺簡單的一個小Demo,卻也發現了一些問題,話不多說,上代碼~:
使用了3個xml文件作為ViewPager的滑動page,布局都是相同的,如下只展示其中之一:
<?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="match_parent" android:orientation="vertical" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/view1"/></LinearLayout>
只是用了一個ImageView作為顯示圖片的容器
主頁面布局:
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout android:orientation="vertical"android:layout_height="match_parent"android:layout_width="match_parent"xmlns:android="http://schemas.android.com/apk/res/android"><!-- 切換卡 --><android.support.v4.view.ViewPager android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/viewPager"></android.support.v4.view.ViewPager><!-- 點點 --><LinearLayout android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/viewGroup" android:layout_alignParentBottom="true" android:gravity="center_horizontal" android:layout_marginBottom="40dp"></LinearLayout></RelativeLayout>
接下來就是主函數的的代碼了:
package com.yztc.lx.homework;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.ViewGroup.LayoutParams;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import java.util.ArrayList;import java.util.List;/** * Created by Lx on 2016/8/6. */public class Layout1Activity extends Activity { private ViewPager viewPager; private PagerAdapter adapter; private List<View> viewPages = new ArrayList<>(); //包裹點點的LinearLayout private ViewGroup group; private ImageView imageView; //定義一個ImageVIew數組,來存放生成的小園點 private ImageView[] imageViews; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout1); initView(); initPageAdapter(); initPointer(); initEvent(); } //為控件綁定事件,綁定適配器 private void initEvent() { viewPager.setAdapter(adapter); viewPager.addOnPageChangeListener(new GuidePageChangeListener()); } //初始化ViewPager private void initPageAdapter() { /** * 對于這幾個想要動態載入的page頁面,使用LayoutInflater.inflate()來找到其布局文件,并實例化為View對象 */ LayoutInflater inflater = LayoutInflater.from(this); View page1 = inflater.inflate(R.layout.page1, null); View page2 = inflater.inflate(R.layout.page2, null); View page3 = inflater.inflate(R.layout.page3, null); //添加到集合中 viewPages.add(page1); viewPages.add(page2); viewPages.add(page3); adapter = new PagerAdapter() { //獲取當前界面個數 @Override public int getCount() { return viewPages.size(); } //判斷是否由對象生成頁面 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(viewPages.get(position)); } //返回一個對象,這個對象表明了PagerAdapter適配器選擇哪個對象放在當前的ViewPager中 @Override public Object instantiateItem(ViewGroup container, int position) { View view = viewPages.get(position); container.addView(view); return view; } }; } //綁定控件 private void initView() { viewPager = (ViewPager) findViewById(R.id.viewPager); group = (ViewGroup) findViewById(R.id.viewGroup); } //初始化下面的小圓點的方法 private void initPointer() { //有多少個界面就new多長的數組 imageViews = new ImageView[viewPages.size()]; for (int i = 0; i < imageViews.length; i++) { imageView = new ImageView(this); //設置控件的寬高 imageView.setLayoutParams(new LayoutParams(25, 25)); //設置控件的padding屬性 imageView.setPadding(20, 0, 20, 0); imageViews[i] = imageView; //初始化第一個page頁面的圖片的原點為選中狀態 if (i == 0) { //表示當前圖片 imageViews[i].setBackgroundResource(R.mipmap.page_indicator_focused); /** * 在java代碼中動態生成ImageView的時候 * 要設置其BackgroundResource屬性才有效 * 設置ImageResource屬性無效 */ } else { imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused); } group.addView(imageViews[i]); } } //ViewPager的onPageChangeListener監聽事件,當ViewPager的page頁發生變化的時候調用 public class GuidePageChangeListener implements ViewPager.OnPageChangeListener { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //頁面滑動完成后執行 @Override public void onPageSelected(int position) { //判斷當前是在那個page,就把對應下標的ImageView原點設置為選中狀態的圖片 for (int i = 0; i < imageViews.length; i++) { imageViews[position].setBackgroundResource(R.mipmap.page_indicator_focused); if (position != i) { imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused); } } } //監聽頁面的狀態,0--靜止 1--滑動 2--滑動完成 @Override public void onPageScrollStateChanged(int state) { } }}這樣,一個簡單地滑動圖片的Demo就完成了,需要注意的地方有:在java代碼中生成ImageView的時候,如果想為其設置顯示的圖片,要使用setBackgroundResource()方法而不是setImageResource()方法
以上所述是小編給大家介紹的Android開發之使用ViewPager實現圖片左右滑動切換效果,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的,再此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答