devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AndroidStudio实现类微信主界面设计_as制作微信页面

作者：盐析白兔 | 2024-06-05 11:43:38

赞

踩

as制作微信页面

目录

一.项目概要

1.设计目标

二.界面设计

1.主页顶部

2.主页底部

3.Fragmet

三.Activity

1.新建activity类

四.核心代码

五.代码仓库

 

一.项目概要

1.设计目标

        经过一个月对Anroid Studio开发技术的学习，虽然内容不多，但对项目开发，APP设计已经有了初步的概念，这次独立完成的类微信主页面是模仿微信的页面，依靠AS平台，使用Fragment，Activity等技术开发。最终设计开发出一个，可实机运行的，主页有四个页面，每个页面展示不同的信息，并且以后可以扩展添加对应的组件，每个页面可以自由切换的APP页面设计。

二.界面设计

1.主页顶部

        首先我们的顶部设计为一个不随页面的切换而改变的标签，像下图展示一样，显示为我们APP的名字，在我们的APP主页顶部。

0425d77ef52a4bbf827585a277f1236a.png

         首先，在layout文件夹中创建一个top.xml文件，在控件框里拖入一个textView控件

8a83007f05d149eeaad29b0adfecde5f.png

        调节textView大小，位置等基础设置的代码如下：

  1. <TextView
  2.         android:id="@+id/textView5"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="55dp"
  5.         android:layout_weight="1"
  6.         android:gravity="center"
  7.         android:text="WeChat"
  8.         android:textColor="@color/white"
  9.         android:textSize="30sp" />

2.主页底部

        在主页底部是四个模块，分别由一张图片和文字组成，下图所示。同上一步操作，先在layout文件夹中创建一个bottom.xml文件。拖入四个linearlayout，分别在四个linearlayout中加入一个imageView和textView控件。

6dbf86881c59429d957fb635d405f01c.png

 

02d9d8fe74f94e0f89c8f66cc6381656.png

        在这里提醒一下，关于imageView控件的图片，图标大家可以在iconfont这个网站进行下载，

将下载好的图标资源拖入drawable文件夹中，最后将图标与对应的imageView控件绑定。

7f76e30e932540479b61db240e5a15da.png

         四组控件的属性具体代码如下：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:id="@+id/LinearLayout"
  7.     tools:context=".MainActivity"
  8.     >
  9.  
  10.     <LinearLayout
  11.         android:id="@+id/linearLayout1"
  12.         android:layout_width="0dp"
  13.         android:layout_height="wrap_content"
  14.         android:layout_weight="1"
  15.         android:gravity="center"
  16.         android:orientation="vertical">
  17.  
  18.         <ImageView
  19.             android:id="@+id/imageView2"
  20.             android:layout_width="30dp"
  21.             android:layout_height="30dp"
  22.             android:src="@drawable/wechat"
  23.  
  24.             />
  25.  
  26.         <TextView
  27.             android:id="@+id/textView2"
  28.             android:layout_width="88dp"
  29.             android:layout_height="wrap_content"
  30.             android:gravity="center"
  31.             android:text="微信"
  32.             android:textSize="24sp" />
  33.  
  34.     </LinearLayout>
  35.  
  36.     <LinearLayout
  37.         android:id="@+id/linearLayout2"
  38.         android:layout_width="0dp"
  39.         android:layout_height="wrap_content"
  40.         android:layout_weight="1"
  41.         android:gravity="center"
  42.         android:orientation="vertical">
  43.  
  44.         <ImageView
  45.             android:id="@+id/imageView3"
  46.             android:layout_width="30dp"
  47.             android:layout_height="30dp"
  48.             android:src="@drawable/friend" />
  49.  
  50.         <TextView
  51.             android:id="@+id/textView3"
  52.             android:layout_width="match_parent"
  53.             android:layout_height="wrap_content"
  54.             android:gravity="center"
  55.             android:text="通讯录"
  56.  
  57.             android:textSize="24sp" />
  58.  
  59.     </LinearLayout>
  60.  
  61.     <LinearLayout
  62.         android:id="@+id/linearLayout3"
  63.         android:layout_width="0dp"
  64.         android:layout_height="wrap_content"
  65.         android:layout_weight="1"
  66.         android:gravity="center"
  67.         android:orientation="vertical">
  68.  
  69.         <ImageView
  70.             android:id="@+id/imageView4"
  71.             android:layout_width="30dp"
  72.             android:layout_height="30dp"
  73.             android:src="@drawable/find" />
  74.  
  75.         <TextView
  76.             android:id="@+id/textView4"
  77.             android:layout_width="wrap_content"
  78.             android:layout_height="wrap_content"
  79.             android:gravity="center"
  80.             android:text="发现"
  81.  
  82.             android:textSize="24sp" />
  83.  
  84.     </LinearLayout>
  85.  
  86.     <LinearLayout
  87.         android:id="@+id/linearLayout4"
  88.         android:layout_width="0dp"
  89.         android:layout_height="wrap_content"
  90.         android:layout_weight="1"
  91.         android:gravity="center"
  92.         android:orientation="vertical">
  93.  
  94.         <ImageView
  95.             android:id="@+id/imageView"
  96.             android:layout_width="30dp"
  97.             android:layout_height="30dp"
  98.             android:src="@drawable/mine" />
  99.  
  100.         <TextView
  101.             android:id="@+id/textView"
  102.             android:layout_width="match_parent"
  103.             android:layout_height="wrap_content"
  104.             android:gravity="center"
  105.             android:text="我"
  106.  
  107.             android:textSize="24sp" />
  108.  
  109.     </LinearLayout>
  110. </LinearLayout>

3.Fragmet

        主页的顶部和底部都做好了，接下来就是中间显示信息的框体，这里我们使用Fragment来设计像下面一样的中间框体，所以这里我们需要设计4个同样的Fragment，这里我拿第一个Fragment来举例说明。

dc861c1bf9bf4d04b04b3ae7754f45c6.png

         同样，在layout中创建一个fragment文件，这里我们只添加一个textView控件，对各个页面进行区分。按照这个步骤，继续创建三个fragment，我们的fragment部分就大功告成了。具体代码如下：

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     tools:context=".tab1">
  6.  
  7.     <!-- TODO: Update blank fragment layout -->
  8.     <TextView
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:gravity="center"
  12.         android:text="这是微信聊天界面"
  13.         android:textSize="35sp" />
  14.  
  15. </LinearLayout>

三.Activity

        通过使用Activity来设计出页面台页面跳转的功能，这里我们设计联系人页面，通过点击其中的联系人，然后跳转到该联系人的具体信息页面。

         Android studio活动在其生命周期的四种状态分别是：运行状态、暂停状态、停止状态、销毁状态。Activity与生命周期的有关的几个方法： 

onCreate方法：创建页面。把页面上的各个元素加载到内存中。
onStart方法：开始页面。把页面显示在屏幕上。
onResume方法：恢复页面。让页面在屏幕上活动起来，例如开机动画，开始任务。
onPause方法：暂停页面。让页面在屏幕上的动作停下来。
onStop方法：停止页面。把页面从内存上撤下来。
onDestroy方法。销毁页面。把页面琮内存中清除掉。
onRestart方法。重新加载内存中的页面数据。

1.新建activity类

887d2b50c8c24f2ebd3496f9e05a2f70.png

       

  1. package com.example.wechat20;
  2.  
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.Button;
  6. import android.widget.ImageView;
  7. import android.widget.TextView;
  8.  
  9. import androidx.appcompat.app.AppCompatActivity;
  10. public class MainActivity2 extends AppCompatActivity {
  11.     private TextView friend_name;
  12.     private TextView friend_info;
  13.     private ImageView friend_pic;
  14.     private Button btn_back;
  15.  
  16.     @Override
  17.     protected void onCreate(Bundle savedInstanceState)
  18.     {
  19.         super.onCreate(savedInstanceState);
  20.         setContentView(R.layout.activity_main2);
  21.  
  22.         init();
  23.         setListeners();
  24.  
  25.     }
  26.  
  27.     public void init()
  28.     {
  29.         friend_name = (TextView) findViewById(R.id.friend_name);
  30.         friend_info = (TextView) findViewById(R.id.friend_info);
  31.         friend_pic = (ImageView) findViewById(R.id.friend_pic);
  32.         btn_back = (Button) findViewById(R.id.btn_back);
  33.     }
  34.  
  35.     private void setListeners()
  36.     {
  37.         btn_back.setOnClickListener(backMain);
  38.     }
  39.  
  40.     private Button.OnClickListener backMain = new Button.OnClickListener()
  41.     {
  42.         @Override
  43.         public void onClick(View arg0)
  44.         {
  45.             MainActivity2.this.finish();
  46.         }
  47.  
  48.     };
  49. }

 

并新建一个相应的xml文件，对联系人信息的具体页面进行设计9bdef508820e4df8a9695089a1b8f8f5.png

 

 

四.核心代码

  1. package com.example.wechat20;
  2.  
  3. import static com.example.wechat20.R.id.linearLayout5;
  4.  
  5. import androidx.appcompat.app.AppCompatActivity;
  6.  
  7. import android.app.Activity;
  8. import android.app.Fragment;
  9. import android.app.FragmentManager;
  10. import android.app.FragmentTransaction;
  11. import android.graphics.Color;
  12. import android.os.Bundle;
  13. import android.view.View;
  14. import android.widget.LinearLayout;
  15.  
  16. public class MainActivity extends AppCompatActivity implements View.OnClickListener{
  17.  
  18.  
  19.     private Fragment fragment4=new tab4();
  20.     private Fragment fragment1=new tab1();
  21.     private Fragment fragment2=new tab2();
  22.     private Fragment fragment3=new tab3();
  23.  
  24.     private FragmentManager fragmentManager;
  25.     private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
  26.  
  27.     @Override
  28.     protected void onCreate(Bundle savedInstanceState) {
  29.         super.onCreate(savedInstanceState);
  30.         setContentView(R.layout.activity_main);
  31.  
  32.         linearLayout1=findViewById(R.id.linearLayout1);
  33.         linearLayout2=findViewById(R.id.linearLayout2);
  34.         linearLayout3=findViewById(R.id.linearLayout3);
  35.         linearLayout4=findViewById(R.id.linearLayout4);
  36.  
  37.         linearLayout1.setOnClickListener(this);
  38.         linearLayout2.setOnClickListener(this);
  39.         linearLayout3.setOnClickListener(this);
  40.         linearLayout4.setOnClickListener(this);
  41.  
  42.         initFragment();
  43.     }
  44.  
  45.     private void initFragment(){
  46.         fragmentManager=getFragmentManager();
  47.         FragmentTransaction transaction=fragmentManager.beginTransaction();
  48.         transaction.add(R.id.id_content,fragment1);
  49.         transaction.add(R.id.id_content,fragment2);
  50.         transaction.add(R.id.id_content,fragment3);
  51.         transaction.add(R.id.id_content,fragment4);
  52.         hideFragment(transaction);
  53.         transaction.commit();
  54.     }
  55.  
  56.  
  57.     private void hideFragment(FragmentTransaction transaction)
  58.     {
  59.         transaction.hide(fragment1);//转换，背景隐藏
  60.         transaction.hide(fragment2);
  61.         transaction.hide(fragment3);
  62.         transaction.hide(fragment4);
  63.     }
  64.     private void background(View v) {
  65.         switch (v.getId()) {
  66.             case R.id.linearLayout1:
  67.                 linearLayout1.setBackgroundColor(Color.parseColor("#426F42"));
  68.                 break;
  69.             case R.id.linearLayout2:
  70.                 linearLayout2.setBackgroundColor(Color.parseColor("#426F42"));
  71.                 break;
  72.             case R.id.linearLayout3:
  73.                 linearLayout3.setBackgroundColor(Color.parseColor("#426F42"));
  74.                 break;
  75.             case R.id.linearLayout4:
  76.                 linearLayout4.setBackgroundColor(Color.parseColor("#426F42"));
  77.                 break;
  78.             default:
  79.                 break;
  80.         }
  81.     }
  82.  
  83.     private void backgroundreturn(View v) //背景颜色改变
  84.     {
  85.         switch (v.getId()) {
  86.             case R.id.linearLayout1:
  87.                 linearLayout1.setBackgroundColor(Color.parseColor("white"));
  88.                 break;
  89.             case R.id.linearLayout2:
  90.                 linearLayout2.setBackgroundColor(Color.parseColor("white"));
  91.                 break;
  92.             case R.id.linearLayout3:
  93.                 linearLayout3.setBackgroundColor(Color.parseColor("white"));
  94.                 break;
  95.             case R.id.linearLayout4:
  96.                 linearLayout4.setBackgroundColor(Color.parseColor("white"));
  97.                 break;
  98.             default:
  99.                 break;
  100.         }
  101.     }
  102.  
  103.     private void showfragmnet(int i) //呼出对应的Fragment
  104.     {
  105.         //展示所对应的fragment
  106.         FragmentTransaction transaction=fragmentManager.beginTransaction();
  107.         hideFragment(transaction);
  108.         switch (i){
  109.             case 0:
  110.                 transaction.show(fragment1);
  111.                 background(linearLayout1);
  112.                 backgroundreturn(linearLayout3);
  113.                 backgroundreturn(linearLayout2);
  114.                 backgroundreturn(linearLayout4);
  115.                 break;
  116.             case 1:
  117.                 transaction.show(fragment2);
  118.                 background(linearLayout2);
  119.                 backgroundreturn(linearLayout4);
  120.                 backgroundreturn(linearLayout1);
  121.                 backgroundreturn(linearLayout3);
  122.                 break;
  123.             case 2:
  124.                 transaction.show(fragment3);
  125.                 background(linearLayout3);
  126.                 backgroundreturn(linearLayout4);
  127.                 backgroundreturn(linearLayout2);
  128.                 backgroundreturn(linearLayout1);
  129.                 break;
  130.             case 3:
  131.                 transaction.show(fragment4);
  132.                 background(linearLayout4);
  133.                 backgroundreturn(linearLayout1);
  134.                 backgroundreturn(linearLayout2);
  135.                 backgroundreturn(linearLayout3);
  136.                 break;
  137.             default:
  138.                 break;
  139.         }
  140.         transaction.commit();
  141.     }
  142.  
  143.     @Override
  144.     public void onClick(View v) //点击linerlayout实现页面转换
  145.     {
  146.         switch (v.getId()){
  147.             case R.id.linearLayout1:
  148.                 showfragmnet(0);
  149.                 break;
  150.             case R.id.linearLayout2:
  151.                 showfragmnet(1);
  152.                 break;
  153.             case R.id.linearLayout3:
  154.                 showfragmnet(2);
  155.                 break;
  156.             case R.id.linearLayout4:
  157.                 showfragmnet(3);
  158.                 break;
  159.             default:
  160.                 break;
  161.         }
  162.     }
  163. }

五.代码仓库

WeChat2.0: 在Android studio中实现一个类微信页面的门户页面框架设计https://gitee.com/song-77/WeChat2.0.git

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/676356
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号