Engineering function introduction
Open the app, the first is a splash screen interface (commonly seen in small advertisements when opening the app), set the time to 2s and then enter the login interface. In the login interface, you can enter the password in the middle, and click the login button to enter the WeChat interface.
The interface of WeChat is composed of 4 fragments, the first fragment is used to display the recently received information, the second fragment is used to display the address book, which is made with ListView; the third is the discovery interface of WeChat, and the second fragment is used to display the address book. Four fragments are used to display user information.
In the message interface, you can enter the chat interface by clicking on a contact, and send a message to the other party, and click the return button on the upper left to exit the chat interface.
The third fragment is the discovery interface. Because there are a lot of things, ScrollView is used to make a scrollable layout. By clicking the top circle of friends bar, you can enter the circle of friends interface to view the circle of friends, and click the return button in the upper left corner to return to the discovery page.
detailed code
The code involves some pictures. If you need picture files, you can download them from the project file at the bottom of the article. The path of the pictures is WechatApplication\app\src\main\res\mipmap-mdpi
In addition, in actual operation, the program may be marked with a red line in this order in the middle of the program. Don’t worry about it, the code will probably disappear after typing, or you can not proceed in this order at all.
splash screen activity
First, let's create a splash screen activity, first create its layout file.
activity_splash.xml
Create a new layout file in the layout folder, named 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
Next is his Java class file, create a new Java class named SplashActivity in the package
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);
}
}
login interface
activity_login.xml
Create a new layout file in the layout folder, named 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
Create a new Java class named LoginActivity inside the package
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);
}
});
}
}
Main interface
Finally arrived at the main interface, the first is 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>
The first 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>
The second 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>
The third 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>
The fourth 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>
Next is 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;
}
}
}
Next
At this point, more than half of the production has been completed, and I will save it for the next article