![cover](https://img-blog.csdnimg.cn/f484a80fbf284d80b072aa31cc2f1df1.png)
Android Studio 制作微信界面 上
用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;
}
}
}
下一篇
至此制作已完成了一大半,接下来留到下一篇文章
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)