Android Studio 制作微信界面 上

工程功能介绍

        打开app,首先是个闪屏界面(常见于一般打开app时的小广告),设置时间为2s后进入登录界面。在登录界面中,中间可以输入密码,点击登录按钮进入微信的界面。

 

        微信的界面由4个fragment组成,第一个fragment用于显示最近收到的信息,第二个fragment用于展示通讯录,该界面用ListView制作而成;第三个是微信的发现界面,第四个fragment用于展示用户的信息。

  

  

        消息界面可以通过点击联系人的方式进入聊天界面,并可与向对方发送消息,点击左上方的返回键可以退出聊天界面。

  

        第三个fragment,也就是发现界面,因为东西有点多,所以用ScrollView作成可以滚动的布局,通过点击最上面的朋友圈栏,可以进入朋友圈界面查看朋友圈,点击左上角的返回键可以返回至发现页面。

 

详细代码

        代码中涉及到一些图片,如果需要图片文件的话可以在文章底部的工程文件中下载,图片的路径为WechatApplication\app\src\main\res\mipmap-mdpi

        另外在实际操作中以这个顺序进行在中途程序可能会被打红线,别管他,代码敲完后大体就没了,或者也可以完全不安这个顺序进行。

        闪屏活动

                首先我们来创建闪屏活动,先创建他的布局文件。

                activity_splash.xml

                在layout文件夹中创建新的布局文件,命名为activity_login

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

    <ImageView
        android:id="@+id/tubiao"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/tubiao"
        android:layout_marginTop="80dp"
        android:layout_centerHorizontal="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:layout_below="@+id/tubiao"
        android:textSize="50dp"
        android:textColor="#000000"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

                SplashActivity

                接下来是他的Java类文件,在包内创建新的Java类命名为SplashActivity

public class SplashActivity extends AppCompatActivity {

    private Handler mHandler = new Handler();

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

        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(new Intent(SplashActivity.this,LoginActivity.class));
            }
        },2000);
    }
}

        登录界面

                activity_login.xml

                在layout文件夹中创建新的布局文件,命名为activity_login

<?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"
    android:orientation="vertical"
    android:background="#f2f2f2">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/touxiang"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@mipmap/touxiang"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="90dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="所长的肚子"
            android:layout_below="@+id/touxiang"
            android:layout_centerHorizontal="true"
            android:textSize="30dp"
            android:textColor="#000000"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="20dp">
        <TextView
            android:id="@+id/mima"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码"
            android:textSize="30dp"
            android:textColor="#000000"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="20dp"/>

        <EditText
            android:id="@+id/edittxt"
            android:layout_width="1040dp"
            android:layout_height="50dp"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/mima"
            android:background="@null"
            android:hint="请输入密码" />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:id="@+id/line"
            android:layout_width="25dp"
            android:layout_height="1dp"
            android:background="#f2f2f2"/>
        <View
            android:layout_width="1030dp"
            android:layout_height="1dp"
            android:background="#60ff0f"
            android:layout_toRightOf="@+id/line"/>
        <View
            android:layout_width="25dp"
            android:layout_height="1dp"
            android:background="#f2f2f2"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>
    <Button
        android:id="@+id/btn_forget_pwd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_login"
        android:text="用短信验证码登录"
        android:textSize="20dp"
        android:textColor="#2999ce"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:background="@null"/>

    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textSize="24sp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:background="#f4f5f7"/>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:id="@+id/dongjie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="紧急冻结"
            android:textSize="20dp"
            android:textColor="#2999ce"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@null"/>
        <TextView
            android:id="@+id/shuxian1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="|"
            android:textSize="20dp"
            android:layout_toLeftOf="@+id/dongjie"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="12dp"/>
        <TextView
            android:id="@+id/shuxian2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="|"
            android:textSize="20dp"
            android:layout_toRightOf="@+id/dongjie"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="12dp"/>
        <Button
            android:id="@+id/zhaohui"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="找回密码"
            android:textSize="20dp"
            android:textColor="#2999ce"
            android:layout_alignParentBottom="true"
            android:layout_toLeftOf="@+id/shuxian1"
            android:background="@null"/>
        <Button
            android:id="@+id/gengduo"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="更多"
            android:textSize="20dp"
            android:textColor="#2999ce"
            android:layout_alignParentBottom="true"
            android:layout_toRightOf="@+id/shuxian2"
            android:background="@null"
            />
    </RelativeLayout>
</LinearLayout>

                LoginActivity.java

                在包内创建新的Java类命名为LoginActivity 

public class LoginActivity extends AppCompatActivity {


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

        
        Button button = findViewById(R.id.btn_login);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(LoginActivity.this,MainActivity.class);
                startActivity(intent);
            }
        });

    }

}

        主界面

                终于到了主界面了,首先是activity_main

                activity_main.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">

    <!--内容-->
    <RelativeLayout
        android:id="@+id/container_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
    <!--功能菜单-->
    <LinearLayout
        android:id="@+id/container_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#f2f2f2"
        android:layout_alignParentBottom="true">
        <LinearLayout
            android:id="@+id/menu_weixin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/caidan_weixin"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@mipmap/weixin02"
                android:background="@drawable/menu_weixin_icon_selector"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="微信"
                android:textColor="#000000"
                android:textSize="20dp"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/menu_tongxunlu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/caidan_tongxun"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/menu_tongxunlu_icon_selector"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通讯录"
                android:textColor="#000000"
                android:textSize="20sp"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/menu_faxian"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/caidain_faxian"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/menu_faxian_icon_selector"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现"
                android:textColor="#000000"
                android:textSize="20sp"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/menu_wode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/caidan_wode"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/menu_wode_icon_selector"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我的"
                android:textColor="#000000"
                android:textSize="20sp"/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

                第一个fragment,weixin_fragment.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"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="#f2f2f2">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="微信"
            android:textColor="#000000"
            android:textSize="25dp" />
        <Button
            android:id="@+id/qita"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@mipmap/qita"
            android:layout_alignParentRight="true"
            android:layout_marginTop="15dp"
            android:layout_marginRight="10dp"/>

        <Button
            android:id="@+id/sousuo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="0dp"
            android:layout_toLeftOf="@+id/qita"
            android:background="@mipmap/sousuo" />

    </RelativeLayout>
    <ListView
        android:id="@+id/weixin_listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:divider="#000000"
        android:overScrollMode="never"/>
</LinearLayout>

                第二个fragment,tongxunlu_fragment.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"
    android:orientation="vertical"
    android:background="#ffffff">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="#f2f2f2">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="通讯录"
            android:textColor="#000000"
            android:textSize="25dp" />
        <Button
            android:id="@+id/qita"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@mipmap/qita"
            android:layout_alignParentRight="true"
            android:layout_marginTop="15dp"
            android:layout_marginRight="10dp"/>

        <Button
            android:id="@+id/sousuo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="0dp"
            android:layout_toLeftOf="@+id/qita"
            android:background="@mipmap/sousuo" />

    </RelativeLayout>

    <ListView
        android:id="@+id/txl_listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="#000000"
        android:overScrollMode="never"
        />

</LinearLayout>

                第三个fragment,faxian_fragment.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"
    android:orientation="vertical">
    <!--头部-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="#f2f2f2">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="发现"
            android:textColor="#000000"
            android:textSize="25dp" />
        <Button
            android:id="@+id/qita"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@mipmap/qita"
            android:layout_alignParentRight="true"
            android:layout_marginTop="15dp"
            android:layout_marginRight="10dp"/>

        <Button
            android:id="@+id/sousuo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="0dp"
            android:layout_toLeftOf="@+id/qita"
            android:background="@mipmap/sousuo" />

    </RelativeLayout>
    <!--内容-->

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:overScrollMode="never">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/pyquan_click"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#ffffff">

                <ImageView
                    android:id="@+id/pyquan"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="10dp"
                    android:background="@mipmap/pyquan" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="12dp"
                    android:layout_toRightOf="@+id/pyquan"
                    android:text="朋友圈"
                    android:textColor="#000000"
                    android:textSize="20dp" />

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentRight="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="10dp"
                    android:background="@mipmap/wode_xinxi" />
            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#ffffff">
                <ImageView
                    android:id="@+id/shipinghao"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:background="@mipmap/shipinghao"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/shipinghao"
                    android:text="视屏号"
                    android:textColor="#000000"
                    android:textSize="20dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="12dp"
                    />
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentRight="true"
                    android:background="@mipmap/wode_xinxi"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="10dp"/>
            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#ffffff">
                    <ImageView
                        android:id="@+id/saoysao"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/saoysao"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/saoysao"
                        android:text="扫一扫"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="12dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <View
                        android:layout_width="45dp"
                        android:layout_height="1dp"
                        android:background="#ffffff"/>
                    <View
                        android:layout_width="1000dp"
                        android:layout_height="1dp"
                        android:background="#e0e0e0"/>
                </LinearLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#ffffff">
                    <ImageView
                        android:id="@+id/yyy"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/yaoyyao"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/yyy"
                        android:text="摇一摇"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="12dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
            </LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#ffffff">
                    <ImageView
                        android:id="@+id/kyk"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/kanykan"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/kyk"
                        android:text="看一看"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="12dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <View
                        android:layout_width="45dp"
                        android:layout_height="1dp"
                        android:background="#ffffff"/>
                    <View
                        android:layout_width="1000dp"
                        android:layout_height="1dp"
                        android:background="#e0e0e0"/>
                </LinearLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#ffffff">
                    <ImageView
                        android:id="@+id/sys"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/souysou"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/sys"
                        android:text="搜一搜"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="12dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
            </LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#ffffff">
                <ImageView
                    android:id="@+id/zbfj"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:background="@mipmap/zhibofujin"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/zbfj"
                    android:text="直播和附近"
                    android:textColor="#000000"
                    android:textSize="20dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="12dp"
                    />
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentRight="true"
                    android:background="@mipmap/wode_xinxi"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="10dp"/>
            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#ffffff">
                    <ImageView
                        android:id="@+id/gouwu"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/kanykan"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/gouwu"
                        android:text="购物"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="12dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <View
                        android:layout_width="45dp"
                        android:layout_height="1dp"
                        android:background="#ffffff"/>
                    <View
                        android:layout_width="1000dp"
                        android:layout_height="1dp"
                        android:background="#e0e0e0"/>
                </LinearLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#ffffff">
                    <ImageView
                        android:id="@+id/youxi"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/souysou"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/youxi"
                        android:text="游戏"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="12dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
            </LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#ffffff">
                <ImageView
                    android:id="@+id/xiaochengxu"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:background="@mipmap/xiaochengxu"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/xiaochengxu"
                    android:text="小程序"
                    android:textColor="#000000"
                    android:textSize="20dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="12dp"
                    />
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentRight="true"
                    android:background="@mipmap/wode_xinxi"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="10dp"/>
            </RelativeLayout>
        </LinearLayout>
    </ScrollView>


</LinearLayout>

                第四个fragment,wode_fragment.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"
    android:orientation="vertical"
    android:background="#f2f2f2">
    
    <!--利用ScrollView实现滚动-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:overScrollMode="never">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <!--头部-->
            <LinearLayout
                android:id="@+id/layout_wode_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffff">
                <Button
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:background="@mipmap/touxiang"
                    android:layout_marginTop="50dp"
                    android:layout_marginLeft="20dp" />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:orientation="vertical">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="所长的肚子"
                        android:textSize="30dp"
                        android:textColor="#000000"
                        android:layout_marginTop="50dp" />
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="30dp">
                        <TextView
                            android:id="@+id/weixinhao"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="微信号:123456789"
                            android:textSize="20dp"/>
                        <Button
                            android:id="@+id/wode_xinxixinxi"
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:background="@mipmap/wode_xinxi"
                            android:layout_alignParentRight="true"/>
                        <ImageView
                            android:layout_width="30dp"
                            android:layout_height="30dp"
                            android:src="@mipmap/wode_ma"
                            android:layout_toLeftOf="@+id/wode_xinxixinxi"/>
                    </RelativeLayout>
                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="+状态"
                        android:textSize="20dp"
                        android:background="@null"
                        />
                </LinearLayout>
            </LinearLayout>

            <View
                android:layout_width="wrap_content"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#ffffff">
                <ImageView
                    android:id="@+id/zhifu"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:background="@mipmap/zhifu"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/zhifu"
                    android:text="支付"
                    android:textColor="#000000"
                    android:textSize="20dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="10dp"
                    />
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentRight="true"
                    android:background="@mipmap/wode_xinxi"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="10dp"/>
            </RelativeLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:orientation="vertical"
                android:background="#ffffff">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp">
                    <ImageView
                        android:id="@+id/shoucang"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/shoucang"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/shoucang"
                        android:text="收藏"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="10dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp">
                    <ImageView
                        android:id="@+id/xiangce"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/xiangce"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/xiangce"
                        android:text="相册"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="10dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp">
                    <ImageView
                        android:id="@+id/kabao"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/kabao"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/kabao"
                        android:text="卡包"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="10dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp">
                    <ImageView
                        android:id="@+id/biaoqing"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@mipmap/biaoqing"
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toRightOf="@+id/biaoqing"
                        android:text="表情"
                        android:textColor="#000000"
                        android:textSize="20dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="10dp"
                        />
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_alignParentRight="true"
                        android:background="@mipmap/wode_xinxi"
                        android:layout_marginTop="10dp"
                        android:layout_marginRight="10dp"/>
                </RelativeLayout>
            </LinearLayout>

            <View
                android:layout_width="wrap_content"
                android:layout_height="10dp"
                android:background="#e0e0e0"/>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#ffffff">
                <ImageView
                    android:id="@+id/shezhi"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:background="@mipmap/shezhi"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/shezhi"
                    android:text="设置"
                    android:textColor="#000000"
                    android:textSize="20dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="10dp"
                    />
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_alignParentRight="true"
                    android:background="@mipmap/wode_xinxi"
                    android:layout_marginTop="10dp"
                    android:layout_marginRight="10dp"/>
            </RelativeLayout>

        </LinearLayout>
    </ScrollView>
</LinearLayout>

                接下来是MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private LinearLayout mMenuWeixin;
    private LinearLayout mMenuTongxunlu;
    private LinearLayout mMenuFaxian;
    private LinearLayout mMenuWode;

    private WeixinFragment weixinFragment = new WeixinFragment();
    private TongxunluFragment tongxunluFragment = new TongxunluFragment();
    private FaxianFragment faxianFragment = new FaxianFragment();
    private WodeFragemnt wodeFragemnt = new WodeFragemnt();

    ImageView weixinImg;
    ImageView tongxunImg;
    ImageView faxianImg;
    ImageView wodeImg;

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

        initView();

        weixinImg = (ImageView) findViewById(R.id.caidan_weixin);
        tongxunImg = (ImageView) findViewById(R.id.caidan_tongxun);
        faxianImg = (ImageView) findViewById(R.id.caidain_faxian);
        wodeImg = (ImageView) findViewById(R.id.caidan_wode);


        this.getSupportFragmentManager().beginTransaction()
                .add(R.id.container_content,weixinFragment)
                .add(R.id.container_content,tongxunluFragment)
                .add(R.id.container_content,faxianFragment)
                .add(R.id.container_content,wodeFragemnt)
                .hide(tongxunluFragment).hide(faxianFragment)
                .hide(wodeFragemnt).commit();
    }

    private void initView() {
        mMenuWeixin = this.findViewById(R.id.menu_weixin);
        mMenuTongxunlu = this.findViewById(R.id.menu_tongxunlu);
        mMenuFaxian = this.findViewById(R.id.menu_faxian);
        mMenuWode = this.findViewById(R.id.menu_wode);

        mMenuWeixin.setOnClickListener(this);
        mMenuTongxunlu.setOnClickListener(this);
        mMenuFaxian.setOnClickListener(this);
        mMenuWode.setOnClickListener(this);
    }

    @Override
    public void onClick(View v){
        switch (v.getId()){
            case R.id.menu_weixin:
                weixinImg.setImageResource(R.mipmap.weixin02);
                tongxunImg.setImageResource(R.mipmap.tongxunlu01);
                faxianImg.setImageResource(R.mipmap.faxian01);
                wodeImg.setImageResource(R.mipmap.wode01);
                this.getSupportFragmentManager().beginTransaction()
                    .show(weixinFragment).hide(tongxunluFragment)
                    .hide(faxianFragment).hide(wodeFragemnt)
                    .commit();break;
            case R.id.menu_tongxunlu:
                weixinImg.setImageResource(R.mipmap.weixin01);
                tongxunImg.setImageResource(R.mipmap.tongxunlu02);
                faxianImg.setImageResource(R.mipmap.faxian01);
                wodeImg.setImageResource(R.mipmap.wode01);
                this.getSupportFragmentManager().beginTransaction()
                    .show(tongxunluFragment).hide(weixinFragment)
                    .hide(faxianFragment).hide(wodeFragemnt)
                    .commit();break;
            case R.id.menu_faxian:
                weixinImg.setImageResource(R.mipmap.weixin01);
                tongxunImg.setImageResource(R.mipmap.tongxunlu01);
                faxianImg.setImageResource(R.mipmap.faxian02);
                wodeImg.setImageResource(R.mipmap.wode01);
                this.getSupportFragmentManager().beginTransaction()
                    .show(faxianFragment).hide(weixinFragment)
                    .hide(tongxunluFragment).hide(wodeFragemnt)
                    .commit();break;
            case R.id.menu_wode:
                weixinImg.setImageResource(R.mipmap.weixin01);
                tongxunImg.setImageResource(R.mipmap.tongxunlu01);
                faxianImg.setImageResource(R.mipmap.faxian01);
                wodeImg.setImageResource(R.mipmap.wode02);
                this.getSupportFragmentManager().beginTransaction()
                    .show(wodeFragemnt).hide(tongxunluFragment)
                    .hide(faxianFragment).hide(weixinFragment)
                    .commit();break;
            default:break;
        }
    }
}

下一篇

至此制作已完成了一大半,接下来留到下一篇文章

Android Studio 制作微信界面 下_nazonomaster的博客-CSDN博客https://blog.csdn.net/nazonomaster/article/details/124463933

猜你喜欢

转载自blog.csdn.net/nazonomaster/article/details/124456716
今日推荐