Android Studio搭建简单类微信小程序首页框架

目录

1、页面布局

2、代码具体实现

3、界面展示

---

1、页面布局

第一步：创建top.xml和bottom.xml.文件，用于设计界面顶部与底部按键。再修改activity_main.xml文件，将前面两个文件效果加入。最后设计四个功能界面。

1、 top.xml

用于首页标题显示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#4CAF50">

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

bottom.xml

四个linearlayout（线性布局）中均包含一个textview和一个imageview。

<LinearLayout
        android:id="@+id/tab01"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/weixinButton"
            android:layout_width="match_parent"
            android:layout_height="49dp"
            app:srcCompat="@drawable/message" />

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

2、修改activity_main.xml

导入顶部和底部布局，中间界面使用Framlayout

<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"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </FrameLayout>

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

</LinearLayout>

3、四个fragment.xml文件编写

创建切换时的四个界面

这里以信息界面为例

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WeChatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信消息界面"
        android:textSize="34sp" />

</LinearLayout>

 2、代码具体实现

主要实现的功能：

1.点击时切换fragment内容
2.点击时改变底部被点击的按钮的颜色

每个fragment.xml文件对应一个fragment.java文件，更改页面id即可将页面内容放进类中。

package com.example.wechat;

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

import androidx.fragment.app.Fragment;


public class WeChatFragment extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_wechat, container, false);
    }

}

 MainActivity.java文件编写

package com.example.wechat;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Fragment WeChatFragment;
    private Fragment friendFragment;
    private Fragment circleFragment;
    private Fragment configFragment;
    private FragmentManager fm;

    private ImageView weixinButton;
    private ImageView friendButton;
    private ImageView findButton;
    private ImageView SettingButton;

    private TextView weixinText;
    private TextView friendText;
    private TextView findText;
    private TextView SettingText;

    private LinearLayout tab01,tab02,tab03,tab04;



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

        WeChatFragment=new WeChatFragment();
        circleFragment=new circleFragment();
        friendFragment=new friendFragment();
        configFragment=new configFragment();

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

        weixinButton=findViewById(R.id.weixinButton);
        friendButton=findViewById(R.id.friendButton);
        findButton=findViewById(R.id.findButton);
        SettingButton=findViewById(R.id.SettingButton);

        weixinText=findViewById(R.id.weixinText);
        friendText=findViewById(R.id.friendText);
        findText=findViewById(R.id.findText);
        SettingText=findViewById(R.id.SettingText);

        fm=getSupportFragmentManager();
        initalfragment();


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

    }

    private void initalfragment() {
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.add(R.id.content,WeChatFragment);
        transaction.add(R.id.content,friendFragment);
        transaction.add(R.id.content,circleFragment);
        transaction.add(R.id.content,configFragment);
        Hide(transaction);
        transaction.show(WeChatFragment);
        transaction.commit();
    }


    @Override
    public void onClick(View view) {
        resetBtn();
        switch (view.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;
        }
    }

    private void show(int i) {
        FragmentTransaction transaction=fm.beginTransaction();
        Hide(transaction);
        switch (i){
            case 1:transaction.show(WeChatFragment);weixinButton.setImageResource(R.drawable.message_pressed);break;
            case 2:transaction.show(friendFragment);friendButton.setImageResource(R.drawable.friend_pressed);break;
            case 3:transaction.show(circleFragment);findButton.setImageResource(R.drawable.circle_pressed);break;
            case 4:transaction.show(configFragment);SettingButton.setImageResource(R.drawable.setting_pressed);break;
            default:
                break;
        }
        transaction.commit();

    }

    private void Hide(FragmentTransaction transaction) {
        transaction.hide(WeChatFragment);
        transaction.hide(friendFragment);
        transaction.hide(circleFragment);
        transaction.hide(configFragment);
    }

    private void resetBtn(){
        weixinButton.setImageResource(R.drawable.message);
        friendButton.setImageResource(R.drawable.friend);
        findButton.setImageResource(R.drawable.circle);
        SettingButton.setImageResource(R.drawable.setting);
    }
}

3、界面展示

      

                                    ​​​​​​​        ​​​​​​​

 

源码地址：

https://gitee.com/qian-jiahao/WeChat.git​​​​​​​