ViewPager的使用及獲取子view控制元件的操作（inflate）

阿新 • • 發佈：2019-01-19

Step 1: 佈局檔案中新增viewpager和切換頁面button

<span style="font-size:18px;"><RelativeLayout 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"
    tools:context="com.phenix.iot_v1_tab.MainActivity" >    
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPagerId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         /> 	
    
    <!--  -->
    lay1.xml-----
    <LinearLayout 
        android:id="@+id/mainBtnLinearId"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        
        <Button 
        	android:id="@+id/settingCtrlPageBtnId"
       		android:layout_width="match_parent"
        	android:layout_height="wrap_content"
        	android:layout_weight="1"
        	android:layout_alignParentBottom="true"
        	android:gravity="center"
        	android:text="Setting"
        	/>
    
    	<Button
       		android:id="@+id/dataStatusPageBtnId"
       		android:layout_width="match_parent"
        	android:layout_height="wrap_content"
        	android:layout_alignParentBottom="true"
        	android:layout_weight="1"
        	android:layout_toRightOf="@id/settingCtrlPageBtnId"
        	android:gravity="center"
        	android:text="Data"
        	/>
    
    	<Button
        	android:id="@+id/chartStatusPageBtnId"
        	android:layout_width="match_parent"
        	android:layout_height="wrap_content"
        	android:layout_alignParentBottom="true"
        	android:layout_weight="1"
        	android:layout_toRightOf="@id/dataStatusPageBtnId"
        	android:gravity="center"
        	android:text="Chart"
        	/>
                   
    </LinearLayout>
   
</RelativeLayout></span>

注意： viewpage和button的前後關係，如果顛倒，button的單擊和viewpage的滑動事件有影響，原因也不知道。

Step 2: 添加布局檔案，右鍵res

本例中新增三個佈局檔案，如上圖藍框所示

Step 3: MainActivity中新增相關變數

本例中有三個切換頁面按鈕：set / data / chart，在set page中有一個set gain按鈕

<span style="font-size:18px;">//定義ViewPager變數
	ViewPager pager = null;
	View viewPager_set;
	View viewPager_data;
	View viewPager_chart;
	ArrayList<View> viewContainter = new ArrayList<View>();
	//定義ViewPager Button變數
	private Button setPageBtn;
	private Button dataPageBtn;
	private Button chartPageBtn;
	
	//定義setPage中Button變數
	private Button setGain_setPage_Btn;</span>

在OnCreate中初始化viewpage和各相關控制元件

<span style="font-size:18px;">@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//初始化ViewPager
		InitViewPager();
		
		//ViewPager繫結頁面滑動監聽器
		pager.addOnPageChangeListener(new viewPagerOnPageChangeListener());
		
		//初始化ViewPager的頁面切換按鈕
		InitViewPagerSwitchBtn();
		
		//Bluetooth初始化
		m_BusinessBluetooth = new BlueToothProcess(this);
		m_BusinessBluetooth.CreatePortListen();
		
		//初始化set page
		InitSetPage();
		
		//set page監聽器處理
		setPageListenerProcess();					
			
	}</span>

step 4: 初始化viewpager控制元件具體程式碼

<span style="font-size:18px;">/*
	 * 初始化ViewPager
	 */
	public void InitViewPager() {
		
		//例項化ViewPager
		pager = (ViewPager)findViewById(R.id.viewPagerId);		
		
		//為viewPager設定內容
		//view是我們放進viewPager裡面的東西，要為它設定好佈局，再放進去
		viewPager_set = LayoutInflater.from(this).inflate(R.layout.setting_control, null);
		viewPager_data = LayoutInflater.from(this).inflate(R.layout.data_status, null);
		viewPager_chart = LayoutInflater.from(this).inflate(R.layout.chart_status, null);
		
		//這是個ArrayList,加進去了3個view
		viewContainter.add(viewPager_set);
		viewContainter.add(viewPager_data);
		viewContainter.add(viewPager_chart);		
		
		//設定介面卡
		pager.setAdapter(new PagerAdapter() {
			
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				//return false;
				return arg0 == arg1;
			}
			
			//viewpager中的元件數量
			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return viewContainter.size();
			}

			@Override
			public void destroyItem(View container, int position, Object object) {
				// TODO Auto-generated method stub
				//super.destroyItem(container, position, object);
				((ViewPager)container).removeView(viewContainter.get(position));
			}

			@Override
			public int getItemPosition(Object object) {
				// TODO Auto-generated method stub
				return super.getItemPosition(object);				
			}

			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				//return super.instantiateItem(container, position);
				((ViewPager)container).addView(viewContainter.get(position));
				return viewContainter.get(position);
			}
			
			
		});
		
	}</span>

step 5: viewpager頁面滑動監聽器程式碼

<span style="font-size:18px;">/*
	 * ViewPager頁面滑動監聽器
	 */
	class viewPagerOnPageChangeListener implements OnPageChangeListener{

		@Override
		public void onPageSelected(int pItem) {
			// TODO Auto-generated method stub
			
			switch (pItem) {
				
			//如果是第一個頁面
			case 0:
				setPageBtn.setText("V");
				dataPageBtn.setText("Data");
				chartPageBtn.setText("Chart");
				System.out.println("Set Page");
				break;
			//如果是第二個頁面
			case 1:
				setPageBtn.setText("Set");
				dataPageBtn.setText("V");
				chartPageBtn.setText("Chart");
				System.out.println("Data Page");
				break;
			//如果是第三個頁面
			case 2:
				setPageBtn.setText("Set");
				dataPageBtn.setText("Data");
				chartPageBtn.setText("V");
				System.out.println("Chart Page");
			break;
			}
			
		}
		
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
			
		}
		
		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
			
		}
		
	}</span>

Step 6: 頁面切換按鈕功能實現

<span style="font-size:18px;">/**
	 * 初始化ViewPager切換按鈕
	 */
	public void InitViewPagerSwitchBtn() {
		
		//繫結控制元件ID
		setPageBtn = (Button)this.findViewById(R.id.settingCtrlPageBtnId);
		dataPageBtn = (Button)this.findViewById(R.id.dataStatusPageBtnId);
		chartPageBtn = (Button)this.findViewById(R.id.chartStatusPageBtnId);
		
		//設定按鈕跳轉到對應的viewPager頁面
		setPageBtn.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				pager.setCurrentItem(0);
		        System.out.println("SettingPage");
		        
		        Toast toast= Toast.makeText(getApplicationContext(), "測試", Toast.LENGTH_SHORT);
		        toast.show();		        
			}
		});
		
		dataPageBtn.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				pager.setCurrentItem(1);
				System.out.println("DataPage");
			}
		});
		
		chartPageBtn.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				pager.setCurrentItem(2);
				System.out.println("ChartPage");
			}
		});	
		
	}</span>

step 7: 獲取子view中的控制元件（set gain button）並繫結對應操作監聽器

<span style="font-size:18px;">/*
	 * 初始化set page
	 */
	public void InitSetPage() {
		
		//獲取setting view button
		setGain_setPage_Btn = (Button)viewPager_set.findViewById(R.id.setGainBtnId);
	}
	
	
	/*
	 * set page監聽器繫結
	 */
	public void setPageListenerProcess() {
		setGain_setPage_Btn.setOnClickListener(new setGainBtnSetPageOnClickListener());
	}
	
	
	/*
	 * set page 
	 * set gain button listener
	 */
	class setGainBtnSetPageOnClickListener implements OnClickListener {

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			Toast toast= Toast.makeText(getApplicationContext(), "view測試", Toast.LENGTH_SHORT);
	        toast.show();
		}
		
	}</span>

獲取子view控制元件的方法重點講一下：

首先通過inflate得到各個子view的物件

View viewPager_set = LayoutInflater.from(this).inflate(R.layout.setting_control, null); //setting_control就是step2中新增的子view佈局檔案的名稱

然後通過子view物件，獲取其內的控制元件ID

Button setGain_setPage_Btn = (Button)viewPager_set.findViewById(R.id.setGainBtnId);

參考文章：

ViewPager的使用及獲取子view控制元件的操作（inflate）

Step 1: 佈局檔案中新增viewpager和切換頁面button <span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk

ViewPager中動態新增XML佈局檔案，並獲取XML檔案中控制元件ID的操作（inflate）

Step 1: 佈局檔案中新增viewpager和切換頁面button <spanstyle="font-size:18px;"><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/a

關於Html動態新增上傳檔案控制元件inputFile（附件）及清除已選擇的檔案的幾個方法

一、動態新增上傳檔案控制元件 1. 案例一： <HTML> <HEAD> <TITLE>上傳檔案</TITLE> <SCRIPTlanguage=javascripttype=text/javascript>

自定義控制元件之下載控制元件1（DownloadView1）

前段時間在乾貨集中營看到了兩個炫酷的下載按鈕：可惜是隔壁 iOS 的孩子，怎麼辦，我也好喜歡，emmm，某該，只能自己模仿著實現一下了。先從第一個入手（第二個波浪效果暫時還不會）。 1 準備動作寫過幾次自定義控制元件

Winform DevExpress控制元件庫（二）使用SplashScreenManager控制元件定製程式載入頁面

SplashScreenManager控制元件：主要作用是顯示在進行耗時操作時的等待介面；位於工具箱 -> Navigation & Layout（導航欄與佈局類控制元件）目錄下；在工具箱輸入名稱SplashScreenManager檢索，然後直接拖拽

winform控制元件縮寫（集合）

winform控制元件縮寫（集合）文章內所有的控制元件都是博主從網上辛苦整理出來的，希望對大家有用 winform控制元件縮寫（一）標準控制元件：https://blog.csdn.net/qq_36051316/article/details/83831544 winf

winform控制元件縮寫（七）印刷

winform控制元件縮寫（七）印刷序號縮寫空間名 1 psd PageSetupDialog 2 prd Pr

winform控制元件縮寫（六）元件

winform控制元件縮寫（六）元件序號縮寫空間名 1 bgw BackgroundWorker 2 dre D

winform控制元件縮寫（五）對話方塊

winform控制元件縮寫（五）對話方塊序號縮寫空間名 1 cld ColorDialog 2 fbd Fold

winform控制元件縮寫（四）資料

winform控制元件縮寫（四）資料序號縮寫空間名 1 dts DataSet 2 dgv DataGridVi

winform控制元件縮寫（三）選單和工具欄

winform控制元件縮寫（三）選單和工具欄序號縮寫空間名 1 cms ContextMenuStrip 2 mns

winform控制元件縮寫（二）容器控制元件

winform控制元件縮寫（二）容器控制元件序號縮寫空間名 1 flp FlowLayoutPanel 2 grp

winform控制元件縮寫（一）標準控制元件

winform控制元件縮寫（一）標準控制元件序號縮寫空間名 1 btn Button 2 chk CheckBo

c#窗體學習——常用控制元件介紹（一）

偷懶，轉自若雲流風，原文：https://blog.csdn.net/ruoyunliufeng/article/details/72874691 一．常用控制元件 Lable標籤→僅顯示文字； TextBox文字控制元件→文字框； Button按鈕控制元件

Kettle控制元件介紹（1）：生成記錄、自定義常量資料

這邊主要介紹2個控制元件，生成記錄以及自定義常量資料，屬於kettle輸入項裡。一、生成記錄：這是生成記錄的轉換圖，生成記錄的具體值如下: 如圖，建立三個欄位，分別為A、B、C，對其定義欄位型別和欄位值。最上面的"限制"是限制展示的數量；如圖，"限制"為5，那就展示5行。結

PyQt5-對話方塊控制元件使用（QFileDialog）

QFileDialog是用於開啟和儲存檔案的標準對話方塊。 QFileDialog類繼承QDialog類； QFileDialog在開啟檔案時使用了文字過濾器，用於顯示指定副檔名的檔案。也可以設定使用QFileDialog開啟檔案時的起始目錄和指定副檔名的檔案。常用方法：例如：

PyQt5-高階控制元件使用（QTableView）

QTableView類用於以表格形式輸出資訊，可通過自定義的資料模型來顯示資料，通過setModel來繫結資料來源；繼承結構如下： QTableView有以下幾種模式：例如： 1 #QTableView元件的使用 2 from PyQt5.QtWidgets im

Android控制元件集合（二）

RatingBar 星級評分控制元件 1：星星評分樣式 xml檔案內容 <RatingBar android:id="@+id/rb_normal" android:layout_width="wrap_content" android:la

JavaFX UI控制元件教程（六）之Toggle Button

在本章中，您將瞭解ToggleButton該類，這是通過JavaFX API提供的另一種型別的按鈕。可以將兩個或多個切換按鈕組合成一個組，其中一次只能選擇一個按鈕，或者不需要選擇。圖5-1是組合了三個切換按鈕的應用程式的截圖。應用程式根據選擇的切換按鈕繪製具有特定顏色

JavaFX UI控制元件教程（五）之Radio Button

本章討論單選按鈕控制元件和RadioButton類，該類的一個專門實現ToggleButton。可以選擇或取消選擇單選按鈕控制元件。通常，單選按鈕組合成一個組，其中一次只能選擇一個按鈕。此行為將它們與切換按鈕區分開來，因為組中的所有切換按鈕都可以處於取消選擇狀態。

ViewPager的使用及獲取子view控制元件的操作（inflate）

相關推薦