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

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

主界面，主要是提供一个场地给其他的副界面，一共有五个界面，分别是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;

        }
    }

}