Fragment+RadioButton实现点击切换页面效果

首先我们需要在主布局文件中 放一个 容器,方便让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>

效果图:

时间: 2024-10-10 09:10:41

Fragment+RadioButton实现点击切换页面效果的相关文章

类似tabBar的切换页面效果(微信小程序)

微信小程序开发,我们经常遇到类似tabBar的页面切换效果:                  这种效果,微信小程序开发应该如何实现呢?项目源码: 页面切换-横向: 页面切换-竖向: 页面切换的需求是: 当点击任何一个标题时,选中标题的状态区别显示,页面切换到标题对应的页面:当滑动页面时,页面对应的标题呈现选中状态. 代码实现的逻辑是: 定义变量selectedTitle.标题的id.样式title-selected(当id和selectedTitle相等时).当点击任何一个标题时,将选中标题的

fragment+Radiobutton实现顶部导航切换

看过网上很多很多的Fragment实现的导航栏,感觉都过于繁琐,所有写一篇关于自己的心得,这个应该是目前网上最简单的了.废话不多说,直接上项目吧 第一步:创建XXFragment.java和fragment_XX.xml文件: public class AddFragment extends Fragment implements OnClickListener { private View view; public View onCreateView(LayoutInflater inflat

UMI学习-8 antd Menu点击 切换框架页内容页面

本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'react'; class User extends React.Component { render() { return ( <div>用户管理</div> ); } } export default User; import React from 'react'; class User

底部菜单中用fragment,fragment中套用PagerSlidingTabStrip,切换底部时viewpager消失

今天在开发时遇上一个问题,我用的框架是底部菜单四个按钮+fragment,然后主页中的fragment套用了PagerSlidingTabStrip,PagerSlidingTabStrip中是用Viewpager+Tab组合进行点击切换页面或者滑动切换菜单,就这样实现了我想要的功能,可是当我在底部菜单中相互切换时,PagerSlidingTabStrip中的Viewpeger消失了,这是怎么产生的呢?官方的Demo没有组合起来使用,所以没有问题,现在组合后问题就出来了,我换用了几个方法都没有解

【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2285.html 在第五篇中介绍了使用导航Navigator进行(页面)场景的切换,但是对于一些需求其实是无法满足,或者说太浪费.例如: 1. 只是想做一个很简单的页面切换,并不需要记录从哪来-也不需要手势滑屏返回等,这时使用导航Navigator太浪费了. 2. 假设: a) 有个View 包括一个Navigato

【Android】解决RadioButton+FragmentPagerAdapter+Fragment切换页面数据加载的问题

解决RadioButton+FragmentPagerAdapter+Fragment切换页面数据加载的问题

Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页面切换 原文地址:http://www.runoob.com/w3cnote/android-tutorial-fragment-demo4.html

安卓点击左右切换页面Fragement

做一个简单的点击左右切换页面,下次再发一个点击后底部图标也会切换和文字也会变换颜色的 只是发教程,所以就用eclipse写,没用AS 代码如下 MainActivity.java package cn.wuxiaocheng.fragment; import android.app.Activity; import android.app.FragmentManager; import android.app.FragmentTransaction; import android.os.Bund

Android之fragment点击切换和滑动切换结合

学了一小段时间的Android,主要接触的是UI设计,打交道最多莫过于fragment了吧.在Android3.0引入了fragment的概念后,几乎在所以的Android的应用中都可以看见其身影,已经有很多前辈高人都已经详细介绍过fragmrnt,我这里就不多说什么了. 这里本来是想模仿一下微信的切换效果,怎奈水平不足,这里就献丑贴出半成品的代码,希望有大神能指点一下.废话不多说,上代码.先从简单的开始吧,这里是我一共用了3个fragment,这里就只贴出第一个的fragment的布局,别的两