溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

ViewPager組件怎么在android中使用

發(fā)布時(shí)間:2021-03-26 17:19:14 來(lái)源:億速云 閱讀:190 作者:Leah 欄目:移動(dòng)開(kāi)發(fā)

本篇文章給大家分享的是有關(guān)ViewPager組件怎么在android中使用,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。

實(shí)現(xiàn)步驟:

1.在左右滑動(dòng)頁(yè)面的界面中,通常在屏幕下方都會(huì)有一個(gè)小圓點(diǎn),我們需要給這些小圓點(diǎn)的實(shí)現(xiàn)準(zhǔn)備一些東西。在drawable目錄下創(chuàng)建兩個(gè)xml文件,一個(gè)畫(huà)出未選中的圓點(diǎn),一個(gè)畫(huà)出選中后的圓點(diǎn)。

2.準(zhǔn)備若干張圖片,他們將用于引導(dǎo)界面上顯示的部分。(圖片有一些要求,為了自適應(yīng)各自尺寸屏幕(平板暫時(shí)不考慮),請(qǐng)選擇盡可能長(zhǎng)的圖片,并且重點(diǎn)信息在圖片的上面,次要信息在下方,我們?cè)谧赃m應(yīng)屏幕的時(shí)候會(huì)使用不顯示圖片下方的縮略方式,所以顯示的時(shí)候以圖片上半部分為核心)

3.實(shí)現(xiàn)ViewPager的適配器類(lèi),寫(xiě)一個(gè)新的類(lèi)繼承適配器類(lèi),并且重寫(xiě)一些關(guān)鍵方法。

4.創(chuàng)建一個(gè)ViewPager的顯示活動(dòng)類(lèi)(1.活動(dòng)類(lèi)里的xml最好使用幀布局,可以讓其他控件顯示在ViewPager布局的上面。

2.活動(dòng)類(lèi)的xml包含一個(gè)ViewPager ,一個(gè)LinerLayout布局實(shí)現(xiàn)圓點(diǎn),一個(gè)用于引導(dǎo)頁(yè)面最后一頁(yè)進(jìn)入到app的button)

1.繪制圓點(diǎn):

選中狀態(tài)的圓點(diǎn):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <size android:height="10dp" android:width="10dp"></size>
 <solid android:color="@color/colorDownBlue"/>
 
</shape>

效果:

ViewPager組件怎么在android中使用

未選中狀態(tài)下的圓點(diǎn):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <size android:height="5dp" android:width="5dp"/>
 <stroke android:width="0.5dp" android:color="@color/colorBlue"/>
</shape>

效果:

ViewPager組件怎么在android中使用

2.圖片準(zhǔn)備

3.實(shí)現(xiàn)ViewPager的適配器類(lèi),寫(xiě)一個(gè)新的類(lèi)繼承適配器類(lèi),并且重寫(xiě)一些關(guān)鍵方法。

package com.example.lenovo.mydemoapp.myPagerAdapter;
 
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
 
import java.util.List;
 
/**
 * Created by lenovo on 2018/5/15.
 */
 
public class MyPagerAdapter extends PagerAdapter {
 List<View> list;
 /**
 外部的list將從下面的構(gòu)造方法中傳入
 */
 public MyPagerAdapter(List<View> list){
 this.list = list;
 
 }
 
 @Override
 public int getCount() {
 return list.size();
 }
 
 @Override
 public boolean isViewFromObject(View view, Object object) {
 return view == object;
 }
 /**
 銷(xiāo)毀項(xiàng)目
 */
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
 //在方法參數(shù)中導(dǎo)入視圖組container,導(dǎo)入已經(jīng)不在當(dāng)前位置的int參數(shù)position 并且從list中獲取它。
 //然后在刪除這個(gè)得到的ImageView的布局
 container.removeView(list.get(position));
 }
 /**
 實(shí)例化項(xiàng)目
 */
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
 //得到當(dāng)前位置,并且從list中獲取布局,在添加到視圖組里
 container.addView(list.get(position));
 //返回一個(gè)當(dāng)前位置的ImageView
 return list.get(position);
 }
 
}

4.創(chuàng)建一個(gè)ViewPager的顯示活動(dòng)類(lèi)(1.活動(dòng)類(lèi)里的xml最好使用幀布局FrameLayout,可以讓其他控件顯示在ViewPager布局的上面。

2.活動(dòng)類(lèi)的xml包含一個(gè)ViewPager ,一個(gè)LinerLayout布局實(shí)現(xiàn)圓點(diǎn),一個(gè)用于引導(dǎo)頁(yè)面最后一頁(yè)進(jìn)入到app的button

活動(dòng)類(lèi)的xml:

<?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:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <android.support.v4.view.ViewPager
 android:id="@+id/GuidePage_ViewPager"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 </android.support.v4.view.ViewPager>
 <Button
 android:id="@+id/GuidePage_EnterButton"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="50dp"
 android:layout_marginLeft="50dp"
 android:layout_marginRight="50dp"
 android:text="馬上體驗(yàn)"
 android:textColor="@color/colorWhite"
 android:background="@drawable/button_background"
 android:visibility="gone"/>
 <LinearLayout
 android:id="@+id/GuidePage_point"
 android:orientation="horizontal"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom|center_horizontal"
 android:layout_marginBottom="20dp"
 android:gravity="bottom"
 >
 </LinearLayout>
 
 
</FrameLayout>

活動(dòng)類(lèi)的Java:

package com.example.lenovo.mydemoapp; 
 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.Button; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
 
import com.example.lenovo.mydemoapp.myPagerAdapter.MyPagerAdapter; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import static com.example.lenovo.mydemoapp.R.layout.activity_guide_page_the_last_page; 
 
/** 
備注:這個(gè)布局沒(méi)有添加再次進(jìn)入app不再顯示引導(dǎo)布局的邏輯判斷 
 */ 
public class GuidePage extends AppCompatActivity { 
 private List<View> list; 
 private int [] imageView = {R.drawable.ic_splash_1,R.drawable.ic_splash_2,R.drawable.ic_splash_3, 
 R.drawable.ic_splash_4,R.drawable.ic_splash_5}; 
 private Button guidePage_EnterButton; 
 private LinearLayout guidePage_point; 
 private ViewPager guidePage_ViewPager; 
 
 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.activity_guide_page); 
 guidePage_EnterButton = (Button)findViewById(R.id.GuidePage_EnterButton); 
 guidePage_point = (LinearLayout)findViewById(R.id.GuidePage_point); 
 guidePage_ViewPager = (ViewPager)findViewById(R.id.GuidePage_ViewPager); 
 //設(shè)置點(diǎn)擊監(jiān)聽(tīng) 
 clickDealWith(); 
 //添加圖片到Viewpager中 
 addView(); 
 //添加圓點(diǎn)到LinearLayout布局中 
 addPoint(); 
 
 
 } 
 public void clickDealWith(){ 
 guidePage_EnterButton.setOnClickListener(new View.OnClickListener() { 
  @Override 
  public void onClick(View v) { 
  //后續(xù)請(qǐng)?jiān)诖颂幪砑觭tartActivity(); 邏輯 
  finish(); 
  } 
 }); 
 /** 
 給ViewPager 引導(dǎo)查看布局添加滑動(dòng)監(jiān)聽(tīng) 
  */ 
 guidePage_ViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
  @Override 
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
  } 
 
  @Override 
  public void onPageSelected(int position) { 
  /** 
  給圓點(diǎn)添加選中判斷,選中的圓點(diǎn)設(shè)置point_slelct的xml,未選中的圓點(diǎn)全部設(shè)置point_normal的xml 
   */ 
  for(int i=0;i< imageView.length;i++){ 
   if(i == position){ 
   guidePage_point.getChildAt(position).setBackgroundResource(R.drawable.point_select); 
   }else{ 
   guidePage_point.getChildAt(i).setBackgroundResource(R.drawable.point_normal); 
   } 
   
   //判斷是否滑動(dòng)到最后一頁(yè),如果滑動(dòng)到了最后一頁(yè)則顯示馬上體驗(yàn)button 
 
   if (position == imageView.length -1){ 
    guidePage_EnterButton.setVisibility(View.VISIBLE);//顯示button 
   }else { 
    guidePage_EnterButton.setVisibility(View.GONE);//不顯示button 
   } 
   
  } 
  } 
 
  @Override 
  public void onPageScrollStateChanged(int state) { 
  } 
 }); 
 } 
 /** 
 添加ImageView布局到ViewPager: 
 實(shí)例化一個(gè)ImageView布局,并且通過(guò)for將數(shù)組里的圖片ID導(dǎo)入到ImageView布局里,在設(shè)置ImageView的相關(guān)參數(shù)。 
 最后添加到List中,在將List放到適配器PagerAdapter里面。最后將適配器設(shè)置匹配給ViewPager 查看布局控件中 
 */ 
 public void addView(){ 
 //實(shí)例化一個(gè)list集合 
 list = new ArrayList<>(); 
 //添加布局參數(shù):參數(shù)是父類(lèi)匹配 
 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewPager.LayoutParams.MATCH_PARENT, 
  ViewGroup.LayoutParams.MATCH_PARENT); 
 for(int i=0;i<imageView.length;i++){ 
  //預(yù)先實(shí)例化一個(gè)imageView 給添加圖片并且添加到list 中 
  ImageView iv = new ImageView(this); 
  iv.setLayoutParams(layoutParams); 
  //設(shè)置圖片的縮放方式,這里設(shè)置的是把圖片按比例擴(kuò)大/縮小到View的寬度,顯示在View的上部分位置 
  iv.setScaleType(ImageView.ScaleType.FIT_START); 
  //添加圖片 
  iv.setImageResource(imageView[i]); 
  list.add(iv); 
 } 
 //導(dǎo)入適配器 
 guidePage_ViewPager.setAdapter(new MyPagerAdapter(list)); 
 
 } 
 /** 
 添加引導(dǎo)界面的圓點(diǎn): 
 
 */ 
 public void addPoint(){ 
 //根據(jù)有多少?gòu)垐D片添加多個(gè)圓點(diǎn) 
 for(int i=0;i<imageView.length;i++){ 
  LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, 
   ViewGroup.LayoutParams.WRAP_CONTENT);//設(shè)置布局參數(shù),參數(shù)為:包裝內(nèi)容 
  /** 
  設(shè)置每個(gè)圓點(diǎn)之間的邊距 
  */ 
  if(i<1){ //當(dāng)沒(méi)有圖片或者只有一個(gè)圓點(diǎn)的時(shí)候,i小于1的時(shí)候就不設(shè)置邊距 
  layoutParams.setMargins(0,0,0,0); 
 
  }else { 
  layoutParams.setMargins(10,0,0,0);//邊距的參數(shù)值分別是左邊,上面,右邊,下面 
  } 
  //注意圓點(diǎn)也是一個(gè)ImageView的圖片布局 
  ImageView iv = new ImageView(this); 
  iv.setLayoutParams(layoutParams); 
  //添加圓點(diǎn)的xml到Image布局中,注意這里添加的是未點(diǎn)擊的xml圓點(diǎn) 
  iv.setImageResource(R.drawable.point_normal); 
  guidePage_point.addView(iv);//將圖片導(dǎo)入到布局中 
 } 
 //在全部圓點(diǎn)添加完成后,給第一個(gè)顯示的圖片的圓點(diǎn)添加一個(gè)被選中的圓點(diǎn)xml 
 guidePage_point.getChildAt(0).setBackgroundResource(R.drawable.point_select); 
 
 
 } 
}

以上就是ViewPager組件怎么在android中使用,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI