Fragment+RadioButton實現點擊切換頁面效果

本文轉載自查看原文 2015-09-04 08:29 5422 RadioButton/ Fragment/ Android

首先我們需要在主布局文件中放一個容器，方便讓fragment加入進去,我們創建了四個Fragment，並用RedioButton實現了導航欄

MainActivity.java

  1 package com.example.administrator.fragmentdemo;
  2 
  3 import android.app.Activity;
  4 import android.app.FragmentManager;
  5 import android.app.FragmentTransaction;
  6 import android.os.Bundle;
  7 import android.view.View;
  8 import android.widget.RadioButton;
  9 
 10 
 11 public class MainActivity extends Activity implements View.OnClickListener {
 12 
 13     private RadioButton image1;
 14     private RadioButton image2;
 15     private RadioButton image3;
 16     private RadioButton image4;
 17 
 18     private FirstFragment firstFragment;
 19     private SecondFragment secondFragment;
 20     private ThirdFragment thirdFragment;
 21     private FourFragment fourFragment;
 22 
 23     @Override
 24     protected void onCreate(Bundle savedInstanceState) {
 25         super.onCreate(savedInstanceState);
 26         setContentView(R.layout.activity_main);
 27 
 28         initViews();
 29         initEvents();
 30         //首先 我們先選定一個
 31         select(0);
 32     }
 33     //初始化  各種個 View
 34     private void initViews(){
 35         image1 = (RadioButton) findViewById(R.id.tab_image1);
 36         image2 = (RadioButton) findViewById(R.id.tab_image2);
 37         image3 = (RadioButton) findViewById(R.id.tab_image3);
 38         image4 = (RadioButton) findViewById(R.id.tab_image4);
 39     }
 40     //初始化 監聽事件
 41     private void initEvents(){
 42         image1.setOnClickListener(this);
 43         image2.setOnClickListener(this);
 44         image3.setOnClickListener(this);
 45         image4.setOnClickListener(this);
 46     }
 47     // 初始化 各種圖片
 48     private void initImageBack(){
 49         image1.setBackgroundResource(R.drawable.chatting_biaoqing_btn_normal);
 50         image2.setBackgroundResource(R.drawable.lbs_icon_disable);
 51         image3.setBackgroundResource(R.drawable.scan_book);
 52         image4.setBackgroundResource(R.drawable.scan_word);
 53     }
 54     //
 55     private void select(int i){
 56         FragmentManager fm = getFragmentManager();  //獲得Fragment管理器
 57         FragmentTransaction ft = fm.beginTransaction(); //開啟一個事務
 58 
 59         hidtFragment(ft);   //先隱藏 Fragment
 60 
 61         switch (i){
 62             case 0:
 63                 image1.setBackgroundResource(R.drawable.chatting_biaoqing_btn_enable);
 64                 if (firstFragment == null){
 65                     firstFragment = new FirstFragment();
 66                     ft.add(R.id.fragment_container,firstFragment);
 67                 }else{
 68                     ft.show(firstFragment);
 69                 }
 70                 break;
 71             case 1:
 72                 image2.setBackgroundResource(R.drawable.lbs_icon_enable);
 73                 if (secondFragment == null){
 74                     secondFragment = new SecondFragment();
 75                     ft.add(R.id.fragment_container,secondFragment);
 76                 }else {
 77                     ft.show(secondFragment);
 78                 }
 79                 break;
 80             case 2:
 81                 image3.setBackgroundResource(R.drawable.scan_book_hl);
 82                 if (thirdFragment == null){
 83                     thirdFragment = new ThirdFragment();
 84                     ft.add(R.id.fragment_container,thirdFragment);
 85                 }else {
 86                     ft.show(thirdFragment);
 87                 }
 88                 break;
 89             case 3:
 90                 image4.setBackgroundResource(R.drawable.scan_word_hl);
 91                 if(fourFragment == null){
 92                     fourFragment = new FourFragment();
 93                     ft.add(R.id.fragment_container,fourFragment);
 94                 }else {
 95                     ft.show(fourFragment);
 96                 }
 97                 break;
 98         }
 99         ft.commit();   //提交事務
100     }
101     //隱藏所有Fragment
102     private void hidtFragment(FragmentTransaction fragmentTransaction){
103         if (firstFragment != null){
104             fragmentTransaction.hide(firstFragment);
105         }
106         if (secondFragment != null){
107             fragmentTransaction.hide(secondFragment);
108         }
109         if (thirdFragment != null){
110             fragmentTransaction.hide(thirdFragment);
111         }
112         if (fourFragment != null){
113             fragmentTransaction.hide(fourFragment);
114         }
115     }
116     //重寫監聽
117     @Override
118     public void onClick(View v) {
119 
120         initImageBack(); //初始化 圖片背景
121 
122         switch (v.getId()){
123             case R.id.tab_image1:
124                 select(0);
125                 break;
126             case R.id.tab_image2:
127                 select(1);
128                 break;
129             case R.id.tab_image3:
130                 select(2);
131                 break;
132             case R.id.tab_image4:
133                 select(3);
134                 break;
135         }
136     }
137 }

主布局文件,在這里我分開寫的，底部的導航欄有新建了一個xml文件，並在主布局文件中用include將他包含進來。

activity_main.xml

<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">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/friendactivity_comment_frame_pressed"/>

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </FrameLayout>

    <include layout="@layout/activity_main_tab_view"/>

</LinearLayout>

底部導航欄的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    android:background="@drawable/friendactivity_comment_frame_pressed">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/tab_image1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/chatting_biaoqing_btn_normal"/>

        <RadioButton
            android:id="@+id/tab_image2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/lbs_icon_disable"/>
        <RadioButton
            android:id="@+id/tab_image3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/scan_book"/>
        <RadioButton
            android:id="@+id/tab_image4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/scan_word"/>
    </RadioGroup>

</LinearLayout>

四個fragment都一樣，我就放一個代碼，布局也很簡單，就放了一個TextView

Fragment.java

package com.example.administrator.fragmentdemo;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Administrator on 2015/9/3.
 */
public class FirstFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.first_fragment_view,container,false);
    }
}

該fragment的布局文件為:

<?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">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is frist fragment"/>
</LinearLayout>

效果圖:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS實現點擊切換頁面 VUE 實現tab切換頁面效果 fragment+viewpager+tablayou實現滑動切換頁面 Android切換頁面效果的實現二：WebView+ViewPager Android 一個Activity 里面放置多個 Fragment 實現點擊切換的Tab 頁面效果 Android商城開發系列（三）——使用Fragment+RadioButton實現商城底部導航欄用Fragment實現Tab頁面切換效果初步總結類似tabBar的切換頁面效果（微信小程序） Android——Fragment實例精講——底部導航欄+ViewPager滑動切換頁面 Android之怎樣實現滑動頁面切換【Fragment】