类微信界面的开发

类微信界面的开发

前端设计

• ​ 设计top

思路：宽度跟父容器匹配，高度按照项目要求进行调整，为了能够自适应不同型号的安卓机型，在宽度单位上选择dp单位。

Text View等控件的具体格式设计见下列代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/top"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:background="@color/cardview_dark_background">
        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/white"
            android:layout_gravity="center"
            android:textSize="24sp"/>
    </LinearLayout>

​

• 设计bottom

思路：先用水平的Linear Layout控制四个image View的高度，在使用四个垂直的Linear Layout，将image View插入到四个垂直的Linear Layout，可以控制image View的宽度，让其均匀排列。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@color/cardview_dark_background"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_weight="1"
        android:id="@+id/vertical2"
        android:orientation="vertical"
        android:layout_gravity="center">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:contentDescription="TODO"
            android:gravity="center"
            tools:srcCompat="@drawable/beauty1" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="24sp"
            android:textColor="@color/white"
            android:text="微信"
            android:gravity="center"/>
    </LinearLayout>

• 整合bottom、top、fragment（fragment的内容比较简单，不在此处列举）

思路：使用include标签整合top和bottom，注意将他们的weight属性设置为1

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/top" android:layout_height="50sp" android:layout_width="match_parent"/>
        <FrameLayout android:id="@+id/frag1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            >

        </FrameLayout>

        <include layout="@layout/bottom" android:layout_height="100sp" android:layout_width="match_parent"/>

    </LinearLayout>

后端代码

• 绑定onclick事件（当点击image view时触发，首先要注意隐藏所有的fragment，在通过view的id值显示对应的fragment，最后注意提交事务）

  public void onClick(View v) {
          System.out.println(v);
  
          // 首先开启事务
          FragmentTransaction fragmentTransaction = fm.beginTransaction();
          // 隐藏所有的fragment
          hideAllFragment(fragmentTransaction);
          // 判断点击的是哪个LinearLayout
          resetImage();
          switch (v.getId()) {
              // 如果是聊天页面
              case R.id.vertical1:
                  fragmentTransaction.show(this.messageFragment);
                  imageView1.setImageResource(R.drawable.beauty1);
                  break;
  
              case R.id.vertical2:
                  fragmentTransaction.show(this.friendFragment);
                  imageView2.setImageResource(R.drawable.beauty2);
                  break;
  
              case R.id.vertical3:
                  fragmentTransaction.show(this.findFragment);
                  imageView3.setImageResource(R.drawable.beauty3);
                  break;
  
              case R.id.vertical4:
                  fragmentTransaction.show(this.myFragment);
                  imageView4.setImageResource(R.drawable.beauty5);
                  break;
          }
          // 提交事务
          fragmentTransaction.commit();
      }
  

• 初始化imageView(绑定图片)以及Fragement（通过fragmentTransaction添加fragment，要注意调用hideAllFragment，避免fragment的重合）

  private void initImageView() {
          imageView1 = findViewById(R.id.imageView);
          imageView2 = findViewById(R.id.imageView1);
          imageView3 = findViewById(R.id.imageView2);
          imageView4 = findViewById(R.id.imageView3);
  
      }
  
      public void initFragment(){
          FragmentTransaction fragmentTransaction = fm.beginTransaction();
          fragmentTransaction.add(R.id.frag1,messageFragment);
          fragmentTransaction.add(R.id.frag1,friendFragment);
          fragmentTransaction.add(R.id.frag1,findFragment);
          fragmentTransaction.add(R.id.frag1,myFragment);
          fragmentTransaction.commit();
      }
  

• ## 实验结果

• 

• https://gitee.com/huang-619/MyApplication