2021-10-10

最新推荐文章于 2022-07-03 22:26:19 发布

李桦c

最新推荐文章于 2022-07-03 22:26:19 发布

阅读量271

点赞数

分类专栏：笔记文章标签： android

本文链接：https://blog.csdn.net/LiHua2019c/article/details/120681226

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信APP页面设计
1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；
2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；
在写这篇博客有一个惨痛的教训：我写了三四个小时的博客因为网页刷新没有保存，结果全部要重来，这让我弄到了晚上凌晨才提交，心累！下次一定要保存！
主要步骤：
我们这是模仿微信界面，微信主界面可以分为上中下三个部分，因此，我们在布局时也分为三个部分，静态布局是xml文件，动态布局需要结合到java代码，因此我们先设置top和bottom部分的布局。
新建一个project，选择empty activity，这时就建立一个空项目，然后我们在左边res文件下的layout文件里新建名为top的xml文件（选择layout resource file），如图所示：
在这里插入图片描述
top.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:background="@color/purple_200"
        android:gravity="center"
        android:textColorHighlight="@color/white"
        android:textSize="25sp"
        android:textColor="#FFC0CB"
        android:text="微信" />
</LinearLayout>

需要注意的是颜色只有部分类型是系统自带的，如果需要找到自己喜欢的颜色需要去查找颜色表，找到对应的数字编码填写上去，字体也是只有四种，如果需要自定义一些字体，也要下载字体文件(.ttf)，然后放在res里的font文件，然后就可以直接引用了！
top页面的显示效果如图：
在这里插入图片描述
下面就是实现bottom页面，bottom页面比top页面要复杂一些，因为bottom包含四个图片和相关文字，因此需要用一个水平线性布局里面包含四个垂直线性布局，然后设置它们的比重一致，即为android:layout_weight=“1”，据此，我们设置代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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:layout_gravity="bottom"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/one"
            tools:srcCompat="@drawable/one" />

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:orientation="vertical">


        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/one"
            tools:srcCompat="@drawable/two" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="20sp"
            android:text="联系人" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:orientation="vertical">


        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/one"
            tools:srcCompat="@drawable/three" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="20sp"
            android:text="发现" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/one"
            tools:srcCompat="@drawable/four" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="20sp"
            android:text="我" />
    </LinearLayout>

</LinearLayout>

bottom里面的图片可以是系统自带的，也可以是从电脑上传的，如果是上传就需要将图片拖到drawable文件，然后就可以直接使用了！
bottom的显示效果如图：
在这里插入图片描述
再建立一个framelayout，这个是放置中间部分的内容，由于我们后面实现点击切换效果使用函数，我们后续的fragment就不放置在这个里面了，然后在activity_main文件里面包含进去top和bottom，实现三者合并的静态页面。

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <include layout="@layout/top" />
    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1">
    </FrameLayout>
    <include layout="@layout/bottom" />
</LinearLayout>

实现效果如图：
在这里插入图片描述
最后就是java代码的编写了，我们需要实现的是切换页面的功能，也就是四个fragment之间的切换，实现这一操作需要用到几个关键的函数：
①findViewById()
具体用法详见：
https://www.jianshu.com/p/41b4910a8e8b
②对于fragment的使用
具体用法详见：
https://blog.csdn.net/jj547139491/article/details/45075183
值得注意的一点就是切换中达到的高亮效果目前我的实现是设置图片的切换实现的，未来学习中应该会用到其他效果！
实现如图所示：
在这里插入图片描述
java主要代码：

package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;


//import android.app.Fragment;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Fragment Chat=new Chat();
    private Fragment Relatives=new Relatives();
    private Fragment Findings=new Findings();
    private Fragment Mine=new Mine();
    private androidx.fragment.app.FragmentManager fragmentManager;
    private LinearLayout Linearlayout1,Linearlayout2,Linearlayout3,Linearlayout4;
    private ImageView imageView1,imageView2,imageView3,imageView4;
    private TextView textView1,textView2,textView3,textView4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Linearlayout1=findViewById(R.id.LinearLayout1);
        Linearlayout2=findViewById(R.id.LinearLayout2);
        Linearlayout3=findViewById(R.id.LinearLayout3);
        Linearlayout4=findViewById(R.id.LinearLayout4);

        imageView1=findViewById(R.id.imageView1);
        imageView2=findViewById(R.id.imageView2);
        imageView3=findViewById(R.id.imageView3);
        imageView4=findViewById(R.id.imageView4);

        textView1=findViewById(R.id.textView1);
        textView2=findViewById(R.id.textView2);
        textView3=findViewById(R.id.textView3);
        textView4=findViewById(R.id.textView4);

        Linearlayout1.setOnClickListener(this);
        Linearlayout2.setOnClickListener(this);
        Linearlayout3.setOnClickListener(this);
        Linearlayout4.setOnClickListener(this);

        initFragment();

        androidx.fragment.app.FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        transaction.show(Chat);
        imageView1.setImageResource(R.drawable.one);
        transaction.commit();
    }

    private void initFragment(){
        fragmentManager=getSupportFragmentManager();
        androidx.fragment.app.FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,Chat);
        transaction.add(R.id.id_content,Relatives);
        transaction.add(R.id.id_content,Findings);
        transaction.add(R.id.id_content,Mine);

        transaction.commit();
    }

    private void showfragment(int i) {
        androidx.fragment.app.FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);

        switch(i){
            case 0:
                transaction.show(Chat);
                imageView1.setImageResource(R.drawable.on);


                restoreView(0);
                break;
            case 1:
                transaction.show(Relatives);
                imageView2.setImageResource(R.drawable.tw);

                restoreView(1);
                break;
            case 2:
                transaction.show(Findings);
                imageView3.setImageResource(R.drawable.thre);

                restoreView(2);
                break;
            case 3:
                transaction.show(Mine);
                imageView4.setImageResource(R.drawable.fou);

                restoreView(3);
                break;
            default:
                break;
        }

        transaction.commit();
    }

    private void restoreView(int i){
        switch (i) {
            case 0:
                imageView2.setImageResource(R.drawable.two);
                imageView3.setImageResource(R.drawable.three);
                imageView4.setImageResource(R.drawable.four);
                break;
            case 1:
                imageView1.setImageResource(R.drawable.one);
                imageView3.setImageResource(R.drawable.three);
                imageView4.setImageResource(R.drawable.four);
                break;
            case 2:
                imageView1.setImageResource(R.drawable.one);
                imageView2.setImageResource(R.drawable.two);
                imageView4.setImageResource(R.drawable.four);
                break;
            case 3:
                imageView1.setImageResource(R.drawable.one);
                imageView2.setImageResource(R.drawable.two);
                imageView3.setImageResource(R.drawable.three);
                break;
            default:break;
        }


    }

    private void hideFragment(androidx.fragment.app.FragmentTransaction transaction){
        transaction.hide(Chat);
        transaction.hide(Relatives);
        transaction.hide(Findings);
        transaction.hide(Mine);

    }

    @Override
    public void onClick(View view) {
        switch(view.getId()){
            case R.id.LinearLayout1:
                showfragment(0);
                break;
            case R.id.LinearLayout2:
                showfragment(1);
                break;
            case R.id.LinearLayout3:
                showfragment(2);
                break;
            case R.id.LinearLayout4:
                showfragment(3);
                break;
            default:
                break;
        }
    }
}

刚开始接触安卓开发还是挺有难度的，不停的在调，特别是布局很容易出现问题，必须一个一个去搞清楚，老师在台上讲的感觉不难，但是实际上，在完成时一定要有很好的逻辑，理清思路才能正确实现！
gittee源码：
https://gitee.com/LiHua2019c/andoroid_lihua/tree/master/