微信门户界面设计

最新推荐文章于 2024-07-27 17:56:15 发布

mujixin

最新推荐文章于 2024-07-27 17:56:15 发布

阅读量285

点赞数

文章标签： java

本文链接：https://blog.csdn.net/mujixin/article/details/120680869

版权

微信门户界面设计

一、功能要求
实现微信门户界面设计。主要展现为四个界面（微信、联系人、发现、设置）可切换的形式。点击界面下方图片文字进行切换，切换到该页面时，相应页面下面图标变亮，字体变色。主要使用布局（layouts）和分段（fragment）。
整个主要分为三块：顶部，底部，中部（中部有四个fragment构成，实现不同界面展示）。
我设计的大致界面：

二、代码
首先是.mxl文件编写，包括top、bottom、四个fragment、activity_main。
调试界面展示出来的效果。
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="match_parent">

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

bottom.xml

<?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="100sp">

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

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

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            app:srcCompat="@android:drawable/ic_menu_call"
            tools:srcCompat="@drawable/imp3" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:gravity="center"
            android:text="联系人"
            android:textColor="@color/black" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            app:srcCompat="@android:drawable/btn_star_big_off"
            tools:srcCompat="@drawable/imp1" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/black" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            app:srcCompat="@android:drawable/ic_menu_call"
            tools:srcCompat="@drawable/imp3" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/black" />
    </LinearLayout>
</LinearLayout>

fragment_weixin.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/weixin"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="这是微信界面"
        android:textColor="@color/black"
        android:textSize="50sp" />
</FrameLayout>

fragment_friend.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/friend"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="这是联系人界面"
        android:textColor="@color/black"
        android:textSize="50sp" />
</FrameLayout>

fragment_contact.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/contact"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView7"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="这是发现界面"
        android:textColor="@color/black"
        android:textSize="50sp" />
</FrameLayout>

fragment_config.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/config"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView8"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="这是设置界面"
        android:textColor="@color/black"
        android:textSize="50sp" />
</FrameLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <include
        android:id="@+id/include"
        layout="@layout/top"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/include2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include"
        app:layout_constraintVertical_bias="0.0">

    </FrameLayout>

    <include
        android:id="@+id/include2"
        layout="@layout/bottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/content" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后是.java文件的编写
weixinFragment.java、friendFragment.java、contactFragment.java、configFragment.java类似（以weixinFragment.java为例）

package com.example.myapplication1;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import android.app.Fragment;

public class weixinFragment extends Fragment {
    public weixinFragment(){

    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        return inflater.inflate(R.layout.fragment_weixin,container,false);

    }
}

MainActivity.java部分实现了界面切换、下标变化、文字变化等功能。

package com.example.myapplication1;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Fragment weixinFragment=new weixinFragment();
    private Fragment friendFragment=new friendFragment();
    private Fragment contactFragment=new contactFragment();
    private Fragment configFragment=new configFragment();

    private TextView textView1;
    private TextView textView2;
    private TextView textView3;
    private TextView textView4;

    private ImageView imageView1;
    private ImageView imageView2;
    private ImageView imageView3;
    private ImageView imageView4;

    private FragmentManager fragmentManager;

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

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

        linearLayout1=findViewById(R.id.LinerLayout_weixin);
        linearLayout2=findViewById(R.id.LinerLayout_friend);
        linearLayout3=findViewById(R.id.LinerLayout_contact);
        linearLayout4=findViewById(R.id.LinerLayout_config);

        textView1=findViewById(R.id.textView1);
        textView2=findViewById(R.id.textView2);
        textView3=findViewById(R.id.textView3);
        textView4=findViewById(R.id.textView4);
        imageView1=findViewById(R.id.imageView1);
        imageView2=findViewById(R.id.imageView2);
        imageView3=findViewById(R.id.imageView3);
        imageView4=findViewById(R.id.imageView4);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

        initFragment();
    }

    private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.content,weixinFragment);
        transaction.add(R.id.content,friendFragment);
        transaction.add(R.id.content,contactFragment);
        transaction.add(R.id.content,configFragment);
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(contactFragment);
        transaction.hide(configFragment);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.LinerLayout_weixin:
                selectFragment(0);
                break;
            case R.id.LinerLayout_friend:
                selectFragment(1);
                break;
            case R.id.LinerLayout_contact:
                selectFragment(2);
                break;
            case R.id.LinerLayout_config:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    private void ChangeBottom(){
        textView1.setTextColor(Color.BLACK);
        imageView1.setImageResource(R.drawable.imp1);
        textView2.setTextColor(Color.BLACK);
        imageView2.setImageResource(R.drawable.imp3);
        textView3.setTextColor(Color.BLACK);
        imageView3.setImageResource(R.drawable.imp5);
        textView4.setTextColor(Color.BLACK);
        imageView4.setImageResource(R.drawable.imp7);
    }

    private void selectFragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        ChangeBottom();
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                textView1.setTextColor(Color.GREEN);
                imageView1.setImageResource(R.drawable.imp2);
                break;
            case 1:
                transaction.show(friendFragment);
                textView2.setTextColor(Color.GREEN);
                imageView2.setImageResource(R.drawable.imp4);
                break;
            case 2:
                transaction.show(contactFragment);
                textView3.setTextColor(Color.GREEN);
                imageView3.setImageResource(R.drawable.imp6);
                break;
            case 3:
                transaction.show(configFragment);
                textView4.setTextColor(Color.GREEN);
                imageView4.setImageResource(R.drawable.imp8);
                break;
            default:
                break;
        }
        transaction.commit();
    }

}

三、底部图标文字变化部分
我主要通过图片的切换来实现图标变亮、变灰这一过程，通过改变文字的颜色（黑色、绿色转变）来实现文字变亮、变灰的效果。
主要代码为以下部分：

private void ChangeBottom(){
        textView1.setTextColor(Color.BLACK);
        imageView1.setImageResource(R.drawable.imp1);
        textView2.setTextColor(Color.BLACK);
        imageView2.setImageResource(R.drawable.imp3);
        textView3.setTextColor(Color.BLACK);
        imageView3.setImageResource(R.drawable.imp5);
        textView4.setTextColor(Color.BLACK);
        imageView4.setImageResource(R.drawable.imp7);
    }

    private void selectFragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        ChangeBottom();
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                textView1.setTextColor(Color.GREEN);
                imageView1.setImageResource(R.drawable.imp2);
                break;
            case 1:
                transaction.show(friendFragment);
                textView2.setTextColor(Color.GREEN);
                imageView2.setImageResource(R.drawable.imp4);
                break;
            case 2:
                transaction.show(contactFragment);
                textView3.setTextColor(Color.GREEN);
                imageView3.setImageResource(R.drawable.imp6);
                break;
            case 3:
                transaction.show(configFragment);
                textView4.setTextColor(Color.GREEN);
                imageView4.setImageResource(R.drawable.imp8);
                break;
            default:
                break;
        }
        transaction.commit();
    }