模仿微信的初级UI界面

模仿微信的初级UI界面

作者：黑衣侠客

---

1.前言

首先，应该先了解微信UI界面的构造，以及你想要达到的效果，那么，下面我来介绍我初步制作的UI界面。

2.步骤

1.首先，建立一个项目Demo_project2

2.修改activity_main.xml的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:id="@+id/linearlayout"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="55.0dip"
        android:background="#F3F1F1"
        android:layout_alignParentBottom="true">
        <TextView
            android:id="@+id/weixin"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="微信"
            android:textColor="#000000"
            android:textSize="15dip" />
        <TextView
            android:id="@+id/tongxunlu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="#000000"
            android:textSize="15dip" />
        <TextView
            android:id="@+id/faxian"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="发现"
            android:textColor="#000000"
            android:textSize="15dip" />
        <TextView
            android:id="@+id/wo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="我"
            android:textColor="#000000"
            android:textSize="15dip" />
    </LinearLayout>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/linearlayout">
    </androidx.viewpager.widget.ViewPager>
</RelativeLayout>

其中，要注意的是，activity_main中的代码只提供了一个线性布局，和一个ViewPager的滑动界面，在这里，LinearLayout线性布局采用水平布局:

android:orientation="horizontal"

然后，在水平布局中，放入4个TextView。

3.制作四个将要放入ViewPager里的微信界面：

应该注意的是：这四个xml文件，都放入Layout文件夹中

weixin.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar1"
        android:layout_height="45dp"
        android:layout_width="match_parent"
        android:background="#FCF7F7"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="发现"
        app:titleTextColor="#0E0D0D"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ListView
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </LinearLayout>
</LinearLayout>

tongxunlu.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar2"
        android:layout_height="45dp"
        android:layout_width="match_parent"
        android:background="#FCF7F7"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="通讯录"
        app:titleTextColor="#0E0D0D"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</LinearLayout>

faxian.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="45dp"
        android:layout_width="match_parent"
        android:background="#FCF7F7"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="发现"
        app:titleTextColor="#0E0D0D"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#FCF7F7"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/pengyouquan"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/pengyouquan"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="朋友圈"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/saoyisao"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/saoyisao"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="扫一扫"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/yaoyiyao"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/yaoyiyao"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="摇一摇"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/kanyikan"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/kanyikan"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="看一看"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/souyisou"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/souyisou"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="搜一搜"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/fujinderen"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/fujinderen"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="附近的人"
            android:drawablePadding="10dip"
            android:textSize="20dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/gouwu"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/gouwu"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="购物"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/youxi"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/youxi"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="游戏"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="#FCF7F7"/>
        <Button
            android:id="@+id/xiaochengxu"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="#ffff"
            android:drawableLeft="@drawable/xiaochengxu"
            android:paddingLeft="10dip"
            android:gravity="center_vertical"
            android:textColor="#0E0D0D"
            android:text="小程序"
            android:textSize="20dp"
            android:drawablePadding="10dip"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FCF7F7"/>
    </LinearLayout>
</LinearLayout>

wo.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:id="@+id/mytitle"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:background="#ffff"
        android:orientation="horizontal"
        android:gravity="center_vertical">
        <ImageView
            android:id="@+id/touxiang"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/myhead" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="黑衣侠客"
            android:textSize="30dp"
            android:layout_toRightOf="@+id/touxiang"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/saoyisao"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#FCF7F7"/>
    <Button
        android:id="@+id/zhifu"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#ffff"
        android:drawableLeft="@drawable/zhifu"
        android:paddingLeft="10dip"
        android:gravity="center_vertical"
        android:textColor="#0E0D0D"
        android:text="支付"
        android:textSize="20dp"
        android:drawablePadding="10dip"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#FCF7F7"/>
    <Button
        android:id="@+id/shoucang"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#ffff"
        android:drawableLeft="@drawable/shoucang"
        android:paddingLeft="10dip"
        android:gravity="center_vertical"
        android:textColor="#0E0D0D"
        android:text="收藏"
        android:textSize="20dp"
        android:drawablePadding="10dip"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#FCF7F7"/>
    <Button
        android:id="@+id/xiangce"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#ffff"
        android:drawableLeft="@drawable/xiangce"
        android:paddingLeft="10dip"
        android:gravity="center_vertical"
        android:textColor="#0E0D0D"
        android:text="相册"
        android:textSize="20dp"
        android:drawablePadding="10dip"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#FCF7F7"/>
    <Button
        android:id="@+id/kabao"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#ffff"
        android:drawableLeft="@drawable/kabao"
        android:paddingLeft="10dip"
        android:gravity="center_vertical"
        android:textColor="#0E0D0D"
        android:text="卡包"
        android:textSize="20dp"
        android:drawablePadding="10dip"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#FCF7F7"/>
    <Button
        android:id="@+id/biaoqing"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#ffff"
        android:drawableLeft="@drawable/biaoqing"
        android:paddingLeft="5dip"
        android:gravity="center_vertical"
        android:textColor="#0E0D0D"
        android:text="表情"
        android:textSize="20dp"
        android:drawablePadding="10dip"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#FCF7F7"/>
    <Button
        android:id="@+id/shezhi"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#ffff"
        android:drawableLeft="@drawable/shezhi"
        android:paddingLeft="10dip"
        android:gravity="center_vertical"
        android:textColor="#0E0D0D"
        android:text="设置"
        android:textSize="20dp"
        android:drawablePadding="10dip"/>
</LinearLayout>

其中的那些图片添加到drawable文件夹中，另外，推荐大家一个免费icon网站

4.修改MainActivty.java中的代码：

package com.example.demo_project2;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Build;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private ViewPager viewPager;
    private ArrayList<View> pageview;
    private TextView weixin;
    private TextView tongxunlu;
    private TextView faxian;
    private TextView wo;
    //当前页面编号
    private int currIndex = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if(Build.VERSION.SDK_INT>=21){
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(getResources().getColor(R.color.colornothing));//使标题栏变为透明状态
        }
        viewPager = findViewById(R.id.viewPager);
        LayoutInflater inflater = getLayoutInflater();
        View view1 = inflater.inflate(R.layout.weixin,null);
        View view2 = inflater.inflate(R.layout.tongxunlu,null);
        View view3 = inflater.inflate(R.layout.faxian,null);
        View view4 = inflater.inflate(R.layout.wo,null);
        weixin = findViewById(R.id.weixin);
        faxian = findViewById(R.id.faxian);
        wo = findViewById(R.id.wo);
        tongxunlu = findViewById(R.id.tongxunlu);
        weixin.setOnClickListener(this);
        tongxunlu.setOnClickListener(this);
        faxian.setOnClickListener(this);
        wo.setOnClickListener(this);
        pageview=new ArrayList<View>();
        //添加想要切换的界面
        pageview.add(view1);
        pageview.add(view2);
        pageview.add(view3);
        pageview.add(view4);
        //数据适配器
        PagerAdapter mPagerAdapter = new PagerAdapter() {
            @Override
            //获取当前的窗体界面数
            public int getCount() {
                return pageview.size();
            }
            @Override
            //判断是否由对象生成界面
            public boolean isViewFromObject(@NonNull View arg0, @NonNull Object arg1) {
                return arg0==arg1;
            }
            //使从ViewGroup中移出当前的View
            public void destroyItem(View arg0,int arg1,Object arg2){
                ((ViewPager)arg0).removeView(pageview.get(arg1));
            }
            //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
            public Object instantiateItem(View arg0,int arg1){
                ((ViewPager)arg0).addView(pageview.get(arg1));
                return pageview.get(arg1);
            }
        };
        //绑定适配器
        viewPager.setAdapter(mPagerAdapter);
        //设置viewPager的初始化界面为第一个界面
        viewPager.setCurrentItem(0);
        //添加切换界面的监听器
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    }
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.weixin:
                //点击微信时，切换到第一页
                viewPager.setCurrentItem(0);
                break;
            case R.id.tongxunlu:
                //点击通讯录时，切换到第二页
                viewPager.setCurrentItem(1);
                break;
            case R.id.faxian:
                //点击发现时，切换到第三页
                viewPager.setCurrentItem(2);
                break;
            case R.id.wo:
                //点击我时，切换到第四页
                viewPager.setCurrentItem(3);
                break;
        }
    }
}

另外，我们还需要修改styles中的代码权限(取消actionBar的使用)

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

主要修改的是:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

由于目前正在制作模仿微信的App，后续功能思路，将在以后依次发布。