这里是学习过程，正在记录/....

索引目录

前言：

工具介绍：

首页基础界面框架：

1.top.xml【微信头部】

2.bottom.xml【微信尾部】

3.FramentContentView【四个中间的部分】

4.最终效果

 存在问题：

写在最后：

---

前言：

        移动开发也称为手机开发，或叫做移动互联网开发，移动应用开发等。是指以手机、PDA、UMPC等便携终端为基础，进行相应的开发工作，由于这些随身设备基本都采用无线上网的方式，因此，业内也称作为无线开发。

        那么我们将对于移动开发技术——Android_Studio【安卓】进行学习记录。本次学习过程会以微信界面为参照进行整体设计模仿。

---

工具介绍：

        使用工具为Andro Studio 2021.1.1.22的版本，软件安装与环境搭配此处不做说明。

【一些实用较为通用的快捷键】

        1、重写接口：Ctrl + Shift + o

        2、删除一行：Ctrl + Y

        3、自动纠错： Ctrl + 回车

        4、切换界面： Ctrl + tab

        5、添加构造函数、set、get等：alt + insert

        在对Android Studio的使用中，我们创建项目选择的是Empty Activity，即空项目。  创建后MainActivity的java文件也是对应主界面代码文件。         

         开发时会有两种视图帮助我们开发，下面的图即为Design模式和code模式，即通过视图和代码两种方式。

【design】

 【code】

---

首页基础界面框架：

        主界面初步我们需要分别建立几个页面，最基础包括头部、尾部、以及中间的fragment部分。我们所做的就是分别做出几个页面后，将它们组合在一起，然后去实现其相关联的功能。

1.top.xml【微信头部】

        头部结构很简单，它的布局为LinearLayout，同时只有一个TextView，然后改变文字和设置底色，效果就出来了。

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/black"
        android:textSize="30sp" />
</LinearLayout>

 

2.bottom.xml【微信尾部】

        对于尾部，包含四个图表，同时具有相关的功能。从结构上看，整体设置水平的布局，内部嵌入四个垂直布局的layout，每个部分含有图片和textView(文字)。但是每个小的布局需要位置关联。

    <LinearLayout
        android:id="@+id/tab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#C3BDBD"
            app:srcCompat="@drawable/tab_weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#C3BDBD"
            android:gravity="center"
            android:text="微信"
            android:textColor="#000000" />
    </LinearLayout>

......（部分）

3.FramentContentView【四个中间的部分】

        中间四个部分，即四个按钮对应的界面，在我们点击的时候，会有对应的切换效果。这里暂时只用文字标注。设置对应界面的id为tab01、tab02、tab03、tab04。

        那如何实现点击这一功能的实现？

        在MainActivity.java文件中，首先初始化方面，针对四个页面也有四个用来显示的java文件，那么我们需要在主界面进行new对象引入。

        weixinFragment = new weixinFragment();
        friendFragment = new friendFragment();
        contactFragment = new contactFragment();
        settingFragment = new settingFragment();

        同时对于界面视图，我们通过id进行索引导入。

        tab01 =findViewById(R.id.tab01);
        tab02 =findViewById(R.id.tab02);
        tab03 =findViewById(R.id.tab03);
        tab04 =findViewById(R.id.tab04);

       在界面显示的时候，微信界面要显示，其他需要隐藏。

    private void initalfragement() {
        FragmentTransaction transaction = fm.beginTransaction();//开始做transaction
        transaction.add(R.id.content,weixinFragment);
        transaction.add(R.id.content,friendFragment);
        transaction.add(R.id.content,contactFragment);
        transaction.add(R.id.content,settingFragment);
        Hide(transaction);
        transaction.show(weixinFragment);
        transaction.commit();

        对于动作进行监听。

        tab01.setOnClickListener(this);
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);

    public void onClick(View v) {//点击后操作
        switch (v.getId()){
            case R.id.tab01: show(1); break;
            case R.id.tab02: show(2); break;
            case R.id.tab03: show(3); break;
            case R.id.tab04: show(4); break;
            default: break;
        }
    }

4.最终效果

 

 

---

 存在问题：

         在界面切换的时候，实则对于按钮的状态应该会有颜色的变化，但是这一点还未实现，后面会继续完善。

---

写在最后：

通过整体的设计后，我们初步了解了整个UI界面的实现过程，了解相关属性和控件，但是整体条理还不是非常清晰，希望多多指教。

gitee：https://gitee.com/with-zero/android_-studion_-mobile.git

With_Zero 2022.3.21