[应用妹 --第二篇 主界面Tab搭建] android应用市场之快速开发

主界面布局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="@drawable/f_home_boungroud"
        >

    <include android:id="@+id/titlebar" layout="@layout/titlebar"/> // titlebar

    <FrameLayout
            android:id="@+id/tab_content"   主界面内容FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1.0"
            />

    <RadioGroup
            android:id="@+id/tabs_rg"      主界面下面四个tab按钮
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:gravity="center"
            android:background="@drawable/downbar"
            >
        <RadioButton
                android:id="@+id/tab_rb_a"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:drawableTop="@drawable/selector_tab"
                android:button="@null"
                android:text="精品"
                android:layout_marginTop="2dp"
                android:layout_marginBottom="2dp"
                android:textColor="@android:color/white"
                android:textSize="13sp"
                android:layout_weight="1.0"
                android:gravity="center"
                android:singleLine="true"
                android:checked="true"
              	android:background="@drawable/selector_tab_item"
                />
        <RadioButton
                android:id="@+id/tab_rb_b"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:drawableTop="@drawable/selector_tab2"
                android:button="@null"
                android:text="热榜"
                       android:layout_marginTop="2dp"
                android:layout_marginBottom="2dp"
                android:textColor="@android:color/white"
                android:textSize="13sp"
                android:layout_weight="1.0"
                android:gravity="center"
                android:singleLine="true"
              android:background="@drawable/selector_tab_item"
                />
        <RadioButton
                android:id="@+id/tab_rb_c"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:drawableTop="@drawable/selector_tab3"
                android:button="@null"
                android:text="软件"
               android:textColor="@android:color/white"
                android:textSize="13sp"
                android:layout_weight="1.0"
                android:gravity="center"
                android:singleLine="true"
                      android:layout_marginTop="2dp"
                android:layout_marginBottom="2dp"
                android:background="@drawable/selector_tab_item"
                />
        <RadioButton
                android:id="@+id/tab_rb_d"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:drawableTop="@drawable/selector_tab4"
                android:button="@null"
                android:text="游戏"
               android:textColor="@android:color/white"
                android:textSize="13sp"
                android:layout_weight="1.0"
                android:gravity="center"
                android:singleLine="true"
                       android:layout_marginTop="2dp"
                android:layout_marginBottom="2dp"
                android:background="@drawable/selector_tab_item"
                />

    </RadioGroup>

</LinearLayout>

/**

* 获取一个带动画的FragmentTransaction

*

* @param index

* @return

*/

private FragmentTransaction obtainFragmentTransaction(int index) {

FragmentTransaction ft = childFragmentManager

.beginTransaction();

// 设置切换动画

if (index > currentTab) {

ft.setCustomAnimations(R.anim.slide_left_in, R.anim.slide_left_out);

} else {

ft.setCustomAnimations(R.anim.slide_right_in,

R.anim.slide_right_out);

}

return ft;

}

//通过点击tab按钮,来显示或者隐藏Fragment

private void showTab(int idx) {

for (int i = 0; i < fragments.size(); i++) {

Fragment fragment = fragments.get(i);

FragmentTransaction ft = obtainFragmentTransaction(idx);

if (idx == i) {

ft.show(fragment); //获取对应点击的按钮,显示不同的Fragment

} else {

ft.hide(fragment);

}

ft.commit();

}

currentTab = idx; // 更新目标tab为当前tab

}

//当我们,的Fragment隐藏后,我们就让他暂停,显示后,我们就让他resume,我们可以方便的在这里进行Adapter.notifiDataChanget()进行一些其他的更新或者初始化操作

public void selete(int i){

Fragment fragment = fragments.get(i);

FragmentTransaction ft = obtainFragmentTransaction(i);

getCurrentFragment().onPause(); // 暂停当前tab

if (fragment.isAdded()) {

fragment.onResume(); // 启动目标tab的onResume()

} else {

ft.add(fragmentContentId, fragment);

}

showTab(i); // 显示目标tab

ft.commit();

// 如果设置了切换tab额外功能功能接口

// if (null != onRgsExtraCheckedChangedListener) {

// onRgsExtraCheckedChangedListener.OnRgsExtraCheckedChanged(

// radioGroup, checkedId, i);

// }

}

整个主页tab就是通过,显示和隐藏fragment来实现的tab页面的切换的,实现原理比较简单。

时间: 2024-10-15 18:14:29

[应用妹 --第二篇 主界面Tab搭建] android应用市场之快速开发的相关文章

[应用妹 --第三篇 主界面Tab搭建2] android应用市场之快速开发

应用市场之,顶部游戏分类tab游戏以及软件分类,是用viewpage实现的. 具体实现代码如下. public class MyTabView extends LinearLayout { /** The context. */ private Context context; /** The m tab selector. */ private Runnable mTabSelector; /** The m listener. */ private ViewPager.OnPageChang

[应用妹 --第一篇界面演示] android应用市场之快速开发

应用妹,项目截图如下,整个demo开发时间基本都为零碎的下班时间,本软件为测试版本. 所有的数据均来自,应用宝数据.(前面已经介绍了,如何来通过HTML网页之类的进行数据的抓取) 项目演示地址APP:http://pan.baidu.com/s/1mgws8bQ //整个项目包含如下模块: 主页4大tab.每个APP详情页面.下载管理器. (下载管理器为整个应用的核心,并且实现了在任意的界面进行进度条的监听.)

多种多样的App主界面Tab实现方法

看了一下App主界面Tab实现方法,总结一下: 再看看实现的效果图:                            第一种:ViewPager实现Tab: 思路:1.布局方面实现顶层和底层布局,中间是ViewPager实现的.中间是四个布局实现的,List<View>                 2.实现:setOnPageChangeListener内部类                3.需要一个适配器:PagerAdapter 源代码如下: <span style=&q

三种实现Android主界面Tab的方式

在平时的Android开发中,我们经常会使用Tab来进行主界面的布局.由于手机屏幕尺寸的限制,合理使用Tab可以极大的利用屏幕资源,给用户带来良好的体验.学会Tab的使用方法已经成为学习Android开发必不可少的技能了.我们经常使用的微信.QQ就是使用Tab的方式进行主界面的布局的. 下面我们通过三种方式实现旧版的微信以演示Tab的使用方式. 最终效果: 第一种:单纯使用ViewPager MainActivity.java public class MainActivity extends

App主界面Tab实现方法

ViewPager + FragmentPagerAdapter 这里模仿下微信APP界面的实现 国际惯例,先看下效果图:   activity_main.xml 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)

Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 1 <FrameLayout 2 android:id="@+id/id_content" 3 android:layout_width="fill_parent" 4 android:layout_height="0dp" 5 android:layout_weight="1" > 6 &

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)

1.ViewPager实现Tab 首先实现底部和底部布局 <?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="4

66、多种多样的App主界面Tab(1)------ ViewPager实现Tab

1 <?xml version="1.0" encoding="utf-8"?> 2 <!-- bottom.xml --> 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="match_parent" 5 android:layout_height=

swift项目-模仿团购(主界面的搭建,以及首页的一些细节)

以前学习oc的时候写的一个团购的项目,现在学习swift,拿来用swift写一遍,也是连猜带蒙的,一点一点的往上凑. 今天主要是把主要的架子搭起来了. 主要有:UITabBarController,UINavigationController,还有navigationItem(这家伙给我搁着坑着了,那个寻思着做出这个效果呢,结果效果出来了,中间的titleview不居中了) 在导航控制器里核心代码: //初始化所有子视图控制器 func setAllChildVC(){ tabbarAddChi