移动开发技术作业一：android studio开发微信界面

2021-10-09 21:00:13 阅读：243 来源： 互联网

标签：transaction 微信 private LinearLayout 开发技术 studio import android id

一、top.xml布局及代码

在layout里新建一个名为top.xml的文件，在布局小组件俩面拖一个LinearLayout，然后在LinearLayout之下拖一个textView进来。代码如下：

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="30dp" />
</LinearLayout>

top界面如下：

二、bottom.xml布局及代码

新建一个Layout Resource File，将ConstrainLayout转化为LinearLayout，添加控件LinearLayout，在LinearLayout中添加ImageView、textView，复制四次，设置一系列属性。

代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="87dp"
    android:layout_gravity="bottom"
    android:background="#000020">

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

        <ImageView
            android:id="@+id/wechat"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/wechat1" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/white"
            android:textSize="30sp" />

    </LinearLayout>

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

        <ImageView
            android:id="@+id/contacts"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/contacts1" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/find"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/find1" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/me"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:srcCompat="@drawable/me1" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

</LinearLayout>

三、activity_main界面设计

在布局小组件里面想拖一个LinearLayout，在此布局之下拖一个FragmentLayout并将其id改为content，在code中用include引入之前的顶部界面top.xml以及底部界面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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include layout="@layout/top"></include>

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

    <include layout="@layout/bottom"></include>

</LinearLayout>

四、四个fragment页面设计

fragment_first.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".weixinFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="40sp" />

</LinearLayout>

fragment_second.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".weixinFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是通讯录界面"
        android:textSize="40sp" />

</LinearLayout>

fragment_third.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".weixinFragment">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是朋友圈界面"
        android:textSize="40sp" />

</LinearLayout>

fragment_fourth.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".weixinFragment">



    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是设置界面"
        android:textSize="40sp" />

</LinearLayout>

运行结果：

五、MainActivity代码

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    //创建对象
    private Fragment weixinFragment=new weixinFragment();
    private Fragment contactFragment=new contactFragment();
    private Fragment discoverFragment=new discoverFragment();
    private Fragment configFragment=new configFragment();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    private ImageButton mImgweixin;
    private ImageButton mImgcontact;
    private ImageButton mImgdiscover;
    private ImageButton mImgconfig;

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

        linearLayout1=findViewById(R.id.LinearLayout_weixin);
        linearLayout2=findViewById(R.id.LinearLayout_contact);
        linearLayout3=findViewById(R.id.LinearLayout_discover);
        linearLayout4=findViewById(R.id.LinearLayout_config);

        mImgweixin = findViewById(R.id.imageButton_weixin);
        mImgcontact = findViewById(R.id.imageButton_contact);
        mImgdiscover = findViewById(R.id.imageButton_discover);
        mImgconfig = findViewById(R.id.imageButton_config);

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

        initFragment();
        selectFragment(0);

    }

    private void initFragment(){
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,weixinFragment);
        transaction.add(R.id.id_content,contactFragment);
        transaction.add(R.id.id_content,discoverFragment);
        transaction.add(R.id.id_content,configFragment);

        transaction.commit();
    }

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

    @Override
    public void onClick(View v) {
        resetImgs();
        switch (v.getId()){
            case R.id.LinearLayout_weixin:
                selectFragment(0);
                break;
            case R.id.LinearLayout_contact:
                selectFragment(1);
                break;
            case R.id.LinearLayout_discover:
                selectFragment(2);
                break;
            case R.id.LinearLayout_config:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    private void selectFragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                mImgweixin.setImageResource(R.drawable.weixin_pressed);
                break;
            case 1:
                transaction.show(contactFragment);
                mImgcontact.setImageResource(R.drawable.contact_pressed);
                break;
            case 2:
                transaction.show(discoverFragment);
                mImgdiscover.setImageResource(R.drawable.discover_pressed);
                break;
            case 3:
                transaction.show(configFragment);
                mImgconfig.setImageResource(R.drawable.config_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }
    
    //提供灰暗图片
    private void resetImgs() {
        mImgweixin.setImageResource(R.drawable.weixin);
        mImgcontact.setImageResource(R.drawable.contact);
        mImgdiscover.setImageResource(R.drawable.discover);
        mImgconfig.setImageResource(R.drawable.config);
    }


}

六、gitee仓库链接

gitee 或 https://gitee.com/xu-suzhi/so-dream.git

标签：transaction,微信,private,LinearLayout,开发技术,studio,import,android,id
来源： https://blog.csdn.net/Christgumeng/article/details/120678216

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动开发技术作业一：android studio开发微信界面