Android实现IOS Tabbar控件的方式

吴统威 on 编程语言 android | 2015-07-02 16:36:39.0

       在之前的,已经使用android开发过了互联网金融的几款应用,以及一些多人互动的android小游戏.但是之前没有时间做记录.这一次,我把用到的相关知识点,都做一下记录.今天这篇文章,我们实现IOS 中Tabbar控件,在android中实现,稍微复杂一点点,当然也有多个方式进行处理.今天我们使用android的radioButton和Fragment来处理.

       首先我们创建相关的Activity,Fragment,以及对应的xml文件,项目结构如下图:

       fragment

       其实整个思路就是radiobutton来做选择处理,Fragment来做内容面板.控制权交给MainActivity.那我们先看下MainActivity的代码,及对应的xml文件

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

    <FrameLayout

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

    <LinearLayout
        android:background="#ffffff"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="35dip">

        <RadioGroup
            android:id="@+id/radiogp"

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

        <RadioButton
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"
            android:id="@+id/rbhome"
            android:checked="false" />

        <RadioButton
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="产品列表"
            android:id="@+id/rbproduct"
            android:checked="false" />

        <RadioButton
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="个人资料"
            android:id="@+id/rbprofile"
            android:checked="false" />

        </RadioGroup>
    </LinearLayout>


</LinearLayout>

  布局方式,上下布局,上面内容面板,frameLayout布局,下面是radiobutton,选择.

   MainActivity

package wutongwei.com.studyfragment_tabbar;


import android.app.Activity;
import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import java.util.logging.Logger;


public class MainActivity extends FragmentActivity implements View.OnClickListener {

    FragmentTransaction transaction;

    FirstFragment first;
    SecondFragment second;
    ThirdFragment third;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState, 0, 0);
        setContentView(R.layout.activity_main, 0, 0);

        //

        RadioGroup group = (RadioGroup)findViewById(R.id.radiogp, 0, 0);
        group.check(R.id.rbhome, 0, 0);

        //
        RadioButton rbhome = (RadioButton) findViewById(R.id.rbhome, 0, 0);
        rbhome.setSelected(true, 0, 0);
        rbhome.setOnClickListener(this, 0, 0);

        RadioButton rbproduct = (RadioButton) findViewById(R.id.rbproduct, 0, 0);

        rbproduct.setOnClickListener(this, 0, 0);
        RadioButton rbprofile = (RadioButton) findViewById(R.id.rbprofile, 0, 0);

        rbprofile.setOnClickListener(this, 0, 0);
        //
        transaction = getSupportFragmentManager().beginTransaction(, 0, 0);

        first = new FirstFragment(, 0, 0);
        transaction.add(R.id.frame, first, 0, 0);

        transaction.commit(, 0, 0);


    }


    @Override
    public void onClick(View v) {

        transaction = getSupportFragmentManager().beginTransaction(, 0, 0);
        System.out.println("this is radiobtn", 0, 0);
        RadioButton rb = (RadioButton) v;
        transaction.addToBackStack(null, 0, 0);
        switch (rb.getId()) {
            case R.id.rbhome:

                if (first == null) {
                    first = new FirstFragment(, 0, 0);
                }

                transaction.replace(R.id.frame, first, 0, 0);

                transaction.commit(, 0, 0);

                break;
            case R.id.rbproduct:

                if (second == null) {
                    second = new SecondFragment(, 0, 0);
                }
                transaction.replace(R.id.frame, second, 0, 0);
                transaction.commit(, 0, 0);

                break;
            case R.id.rbprofile:

                if (third == null) {
                    third = new ThirdFragment(, 0, 0);
                }
                transaction.replace(R.id.frame, third, 0, 0);
                transaction.commit(, 0, 0);

                break;
            default:
                System.out.println("nothing", 0, 0);
        }


    }
}

从代码中不难看出,我们先获取到所有的radiobutton,给他们设定相应的点击事件,然后初始化第一个面板,也就是FirstFragment,首先打开的就是这个首页.也设置好默认选择的radiobutton.

每一个radiobutton都有一个点击事件,我们通过MainActivity来实现,然后通过每个radiobutton的ID来识别不同的radio,处理不同的显示内容.而三个Fragment我们是交由FragmentManager来管理,内容面板替换通过replace方法来实现.

上面就是大概的思路.我们把全部代码贴上


FirstFragment

java

package wutongwei.com.studyfragment_tabbar;

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

/**
 * Created by Tonway on 15/7/1.
 */
public class FirstFragment extends Fragment{


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


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


}

xml

<?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:background="#ffffd660"
    android:orientation="horizontal">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="First"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="50dip" />
</LinearLayout>



SecondFragment

java

package wutongwei.com.studyfragment_tabbar;

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

/**
 * Created by Tonway on 15/7/1.
 */
public class SecondFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

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

xml

<?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:background="#ffff4130">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Second"
        android:id="@+id/textView2"
        android:layout_gravity="center_vertical"
        android:gravity="center"
        android:textSize="50dip" />
</LinearLayout>





ThirdFragment

java

package wutongwei.com.studyfragment_tabbar;

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



public class ThirdFragment extends Fragment {

    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_third, container, false, 0, 0);
    }



}

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="horizontal"
    tools:context="wutongwei.com.studyfragment_tabbar.ThirdFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
        android:text="Third"
        android:id="@+id/third"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="50dip" />

</LinearLayout>

运行代码效果如下:(radiobutton的显示效果,就自己去设置了,我这里就不做美化了)

android tabbar


android项目没有android.jar这个依赖包的解决办法
|
在JAVA中如何发送HTTP GET/POST请求