十天冲刺之五
在我们所做的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);