十天冲刺之五

 

 

在我们所做的app中主界面有三个模块，分别为课程模块、习题模块、用户模块

用户可以通过点击底层栏进行模块的切换，

 

如下，是关于主界面的页面布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <LinearLayout
        android:orientation="vertical"
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--标题栏-->
        <include layout="@layout/main_title_bar"/>
        <!--放置Fragment的main_body-->
        <RelativeLayout
            android:id="@+id/main_body"
            android:background="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/main_bottom_bar"
        android:layout_alignParentBottom="true"
        android:background="#F2F2F2"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="55dp">
        <RelativeLayout
            android:layout_weight="1"
            android:id="@+id/bottom_bar_course_btn"
            android:layout_width="0dp"
            android:layout_height="match_parent">
            <TextView
                android:id="@+id/bottom_bar_text_course"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="3dp"
                android:gravity="center"
                android:singleLine="true"
                android:text="课 程"
                android:textColor="#666666"
                android:textSize="14sp"/>
            <ImageView
                android:layout_width="27dp"
                android:layout_height="27dp"
                android:layout_above="@+id/bottom_bar_text_course"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:id="@+id/bottom_bar_image_course"
                android:src="@drawable/main_course_icon"/>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/bottom_bar_exercises_btn"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent">
            <TextView
                android:id="@+id/bottom_bar_text_exercises"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="3dp"
                android:gravity="center"
                android:singleLine="true"
                android:text="习 题"
                android:textColor="#666666"
                android:textSize="14sp"/>
            <ImageView
                android:layout_width="27dp"
                android:layout_height="27dp"
                android:layout_above="@+id/bottom_bar_text_exercises"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:id="@+id/bottom_bar_image_exercises"
                android:src="@drawable/main_exercises_icon"/>
        </RelativeLayout>
        <RelativeLayout
            android:layout_weight="1"
            android:id="@+id/bottom_bar_myinfo_btn"
            android:layout_width="0dp"
            android:layout_height="match_parent">
            <TextView
                android:id="@+id/bottom_bar_text_myinfo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="3dp"
                android:gravity="center"
                android:singleLine="true"
                android:text="我"
                android:textColor="#666666"
                android:textSize="14sp"/>
            <ImageView
                android:layout_width="27dp"
                android:layout_height="27dp"
                android:layout_above="@+id/bottom_bar_text_myinfo"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:id="@+id/bottom_bar_image_myinfo"
                android:src="@drawable/main_my_icon"/>
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

　

 

进行实例化控件：

将其写在

public class MainActivity extends AppCompatActivity {
    private RelativeLayout main_body;
    private TextView bottom_bar_text_course;
    private ImageView bottom_bar_image_course;
    private RelativeLayout bottom_bar_course_btn;
    private TextView bottom_bar_text_exercises;
    private ImageView bottom_bar_image_exercises;
    private RelativeLayout bottom_bar_exercises_btn;
    private TextView bottom_bar_text_myinfo;
    private ImageView bottom_bar_image_myinfo;
    private RelativeLayout bottom_bar_myinfo_btn;
    private LinearLayout main_bottom_bar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }

    
    private void initView() {
        main_body = findViewById(R.id.main_body);
        bottom_bar_text_course = findViewById(R.id.bottom_bar_text_course);
        bottom_bar_image_course = findViewById(R.id.bottom_bar_image_course);
        bottom_bar_course_btn = findViewById(R.id.bottom_bar_course_btn);
        bottom_bar_text_exercises = findViewById(R.id.bottom_bar_text_exercises);
        bottom_bar_image_exercises = findViewById(R.id.bottom_bar_image_exercises);
        bottom_bar_exercises_btn = findViewById(R.id.bottom_bar_exercises_btn);
        bottom_bar_text_myinfo = findViewById(R.id.bottom_bar_text_myinfo);
        bottom_bar_image_myinfo = findViewById(R.id.bottom_bar_image_myinfo);
        bottom_bar_myinfo_btn = findViewById(R.id.bottom_bar_myinfo_btn);
        main_bottom_bar = findViewById(R.id.main_bottom_bar);
    }

}

　　

 

 

　为使模块切换更突出，添加了在底部栏被点击时会发生变色的代码：

private void setSelectStatus(int index) {
    switch (index){
        case 0:
            bottom_bar_image_course.setImageResource(R.drawable.main_course_icon_selected);
            bottom_bar_text_course.setTextColor(Color.parseColor("#0097F7"));
            bottom_bar_text_exercises.setTextColor(Color.parseColor("#666666"));
            bottom_bar_text_myinfo.setTextColor(Color.parseColor("#666666"));
            bottom_bar_image_exercises.setImageResource(R.drawable.main_exercises_icon);
            bottom_bar_image_myinfo.setImageResource(R.drawable.main_my_icon);
            break;
        case 1:
            bottom_bar_image_exercises.setImageResource(R.drawable.main_exercises_icon_selected);
            bottom_bar_text_exercises.setTextColor(Color.parseColor("#0097F7"));
            bottom_bar_text_course.setTextColor(Color.parseColor("#666666"));
            bottom_bar_text_myinfo.setTextColor(Color.parseColor("#666666"));
            bottom_bar_image_course.setImageResource(R.drawable.main_course_icon);
            bottom_bar_image_myinfo.setImageResource(R.drawable.main_my_icon);
            break;
        case 2:
            bottom_bar_image_myinfo.setImageResource(R.drawable.main_my_icon_selected);
            bottom_bar_text_myinfo.setTextColor(Color.parseColor("#0097F7"));
            bottom_bar_text_course.setTextColor(Color.parseColor("#666666"));
            bottom_bar_text_exercises.setTextColor(Color.parseColor("#666666"));
            bottom_bar_image_exercises.setImageResource(R.drawable.main_exercises_icon);
            bottom_bar_image_course.setImageResource(R.drawable.main_course_icon);
            break;
    }
}

　　

 

 在此完成后加入导航栏的响应区域

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.bottom_bar_course_btn:
            setSelectStatus(0);
            break;
        case R.id.bottom_bar_exercises_btn:
            setSelectStatus(1);
            break;
        case R.id.bottom_bar_myinfo_btn:
            setSelectStatus(2);
            break;
    }
}

　　还有相应的监听器

bottom_bar_course_btn.setOnClickListener(this);
bottom_bar_exercises_btn.setOnClickListener(this);
bottom_bar_myinfo_btn.setOnClickListener(this);