淘忆项目之主界面的修正归纳

淘忆项目之主界面的修正归纳
主界面，主要是提供一个场地给其他的副界面，一共有五个界面，分别是home，theme，share，find，user。
这界面采用一个container和底部按钮，radiobutton和radiogroup的方式实现内容。
第一步，通过photoshop设计底部界面。
 


第二步：记录一下该布局文件：
<?xml version="1.0"
encoding="utf-8"?>
<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"
    android:background="#f8f8f8"
    tools:context=".ui.activity.MainActivity">

    <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/ll_nav">

    </FrameLayout>

    <LinearLayout
        android:id="@+id/ll_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:background="#fff"
        android:orientation="horizontal"
        android:padding="5dp">

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

            <RadioButton
                android:id="@+id/rb_home"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/nav_rb_home"
                android:gravity="center_horizontal|bottom"
                android:paddingTop="2dp"
                android:text="首页"
                android:textColor="@drawable/nav_rb_text"
                android:textSize="12sp"
/>

            <RadioButton
                android:id="@+id/rb_theme"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:button="@null"
                android:drawableTop="@drawable/nav_rb_theme"
                android:gravity="center_horizontal|bottom"
                android:paddingTop="2dp"
                android:text="专题"
                android:textColor="@drawable/nav_rb_text"
                android:textSize="12sp"
/>

            <RadioButton
                android:id="@+id/rb_share"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:button="@null"
                android:drawableTop="@drawable/nav_rb_share"
                android:gravity="center_horizontal|bottom"
                android:paddingTop="2dp"
                android:text="分享"
                android:textColor="@drawable/nav_rb_text"
                android:textSize="12sp"
/>

            <RadioButton
                android:id="@+id/rb_find"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:button="@null"
                android:drawableTop="@drawable/nav_rb_find"
                android:gravity="center_horizontal|bottom"
                android:paddingTop="2dp"
                android:text="发现"
                android:textColor="@drawable/nav_rb_text"
                android:textSize="12dp"
/>

            <RadioButton
                android:id="@+id/rb_user"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:button="@null"
                android:drawableTop="@drawable/nav_rb_user"
                android:gravity="center_horizontal|bottom"
                android:paddingTop="2dp"
                android:text="我的"
                android:textColor="@drawable/nav_rb_text"
                android:textSize="12sp"
/>
        </RadioGroup>

    </LinearLayout>
</RelativeLayout>
在改布局中，套用了一个按钮点击效果的xml文件，如下：
<?xml version="1.0"
encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:drawable="@mipmap/nav_find_pre"/>
    <item android:state_checked="false"
        android:drawable="@mipmap/nav_find"/>
</selector>
其他的都与此相识，只是图片的引用不一样。
还有一个文字的颜色变换的xml文件，内容如下：
<?xml version="1.0"
encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
android:color="#00b7ee"/>
    <item android:state_checked="false"
android:color="#000"/>
    <item android:color="#000"/>
</selector>
第三步：
MainActivity.java文件的写入：
package
com.elainetaylor.blog.ui.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.RadioButton;

import com.elainetaylor.blog.R;
import com.elainetaylor.blog.ui.fragment.HomeFragment;
import com.elainetaylor.blog.ui.fragment.ShareFragment;
import com.elainetaylor.blog.ui.fragment.ThemeFragment;
import com.elainetaylor.blog.ui.fragment.UserFragment;

public class MainActivity
extends AppCompatActivity
implements View.OnClickListener {
    private
RadioButton rbHome,
rbTheme,
rbShare,
rbFind,
rbUser;

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

    public void
init() {
        rbHome
= (RadioButton) findViewById(R.id.rb_home);
        rbTheme
= (RadioButton) findViewById(R.id.rb_theme);
        rbShare
= (RadioButton) findViewById(R.id.rb_share);
        rbFind
= (RadioButton) findViewById(R.id.rb_find);
        rbUser
= (RadioButton) findViewById(R.id.rb_user);
        rbHome.setOnClickListener(this);
        rbTheme.setOnClickListener(this);
        rbShare.setOnClickListener(this);
        rbFind.setOnClickListener(this);
        rbUser.setOnClickListener(this);
        getSupportFragmentManager().beginTransaction().replace(R.id.fl_container,
new HomeFragment()).commit();
    }

    @Override
    public void
onClick(View view) {
        switch
(view.getId()) {
            case
R.id.rb_home:
         //点击后获取fragment显示，以下的同理。 getSupportFragmentManager().beginTransaction().replace(R.id.fl_container,
new HomeFragment()).commit();
                break;
            case R.id.rb_theme:
                getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, new
ThemeFragment()).commit();
                break;
            case R.id.rb_share:
                getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, new
ShareFragment()).commit();
                break;
            case R.id.rb_find:
//                getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, new FindFragment()).commit();
                break;
            case R.id.rb_user:
                getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, new
UserFragment()).commit();
                break;

        }
    }

}