Android简易微信界面
专选课移动互联网开发的第一次作业,利用Android Studio进行了简易Android微信界面的搭建
完整项目代码
- 界面样式展示:
- 界面xml源码
主界面xml源码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/button"/>
</LinearLayout>
button 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:baselineAligned="false"
android:background="@drawable/bottom_bar"
android:layout_height="100dp">
<LinearLayout
android:id="@+id/id_tab_wechat"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/bottom"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_wechat_image"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="#000000"
android:contentDescription="@string/app_name"
android:clickable="false"
android:src="@drawable/tab_weixin_pressed" />
<TextView
android:id="@+id/id_tab_wechat_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信"
android:clickable="false"
android:textColor="#ffffff"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_friend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/bottom_bar"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_friend_image"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="#000000"
android:contentDescription="@string/app_name"
android:clickable="false"
android:src="@drawable/tab_find_frd_normal" />
<TextView
android:id="@+id/id_tab_friend_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="朋友"
android:textColor="#ffffff"
android:clickable="false"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_contact"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/bottom_bar"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_contact_image"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="#000000"
android:contentDescription="@string/app_name"
android:clickable="false"
android:src="@drawable/tab_address_normal" />
<TextView
android:id="@+id/id_tab_contact_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="通讯录"
android:textColor="#ffffff"
android:clickable="false"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_settings"
android:layout_width="0dp"
android:layout_height="87dp"
android:layout_weight="1"
android:background="@drawable/bottom_bar"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_settings_image"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="#000000"
android:contentDescription="@string/app_name"
android:clickable="false"
android:src="@drawable/tab_settings_normal" />
<TextView
android:id="@+id/id_tab_settings_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="设置"
android:clickable="false"
android:textColor="#ffffff"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
TOP标题源码
<?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="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/app_name"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
- 后台JAVA源码
分别创建四个页面的fragment
package com.example.mywechat;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.app.Fragment;
/**
* A simple {@link Fragment} subclass.
*/
public class contactFragment extends Fragment {
public contactFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.tab03, container, false);
}
}
利用main_activity实现fragment之间的切换
package com.example.mywechat;
import android.app.Activity;
import android.os.Bundle;
import android.view.SurfaceControl;
import android.view.Window;
import android.view.View;
import android.app.FragmentManager;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements View.OnClickListener{
private Fragment mTab01=new WechatFragment();
private Fragment mTab02=new friendFragment();
private Fragment mTab03=new contactFragment();
private Fragment mTab04=new settingsFragment();
private FragmentManager fm;
LinearLayout mTabWechat;
LinearLayout mTabFriend;
LinearLayout mTabContact;
LinearLayout mTabSettings;
ImageButton mimgWechat;
ImageButton mimgFriend;
ImageButton mimgContact;
ImageButton mimgSettings;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initFragment();
initView();
selectfragment(0);
initEvent();
}
private void initEvent(){
mTabWechat.setOnClickListener(this);
mTabFriend.setOnClickListener(this);
mTabContact.setOnClickListener(this);
mTabSettings.setOnClickListener(this);
}
private void initFragment(){
fm = getFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.id_content,mTab01);
transaction.add(R.id.id_content,mTab02);
transaction.add(R.id.id_content,mTab03);
transaction.add(R.id.id_content,mTab04);
transaction.commit();
}
private void initView(){
mTabWechat=findViewById(R.id.id_tab_wechat);
mTabFriend = findViewById(R.id.id_tab_friend);
mTabContact = findViewById(R.id.id_tab_contact);
mTabSettings = findViewById(R.id.id_tab_settings);
mimgWechat = findViewById(R.id.id_tab_wechat_image);
mimgFriend = findViewById(R.id.id_tab_friend_image);
mimgContact = findViewById(R.id.id_tab_contact_image);
mimgSettings = findViewById(R.id.id_tab_settings_image);
}
private void hideFragment(FragmentTransaction transaction){
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
private void resetImgs(){
mimgWechat.setImageResource(R.drawable.tab_weixin_normal);
mimgFriend.setImageResource(R.drawable.tab_find_frd_normal);
mimgContact.setImageResource(R.drawable.tab_address_normal);
mimgSettings.setImageResource(R.drawable.tab_settings_normal);
}
private void selectfragment(int i){
FragmentTransaction transaction=fm.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(mTab01);
mimgWechat.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mTab02);
mimgFriend.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(mTab03);
mimgContact.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mimgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
public void onClick(View v){
resetImgs();
switch (v.getId()){
case R.id.id_tab_wechat:
selectfragment(0);
break;
case R.id.id_tab_friend:
selectfragment(1);
break;
case R.id.id_tab_contact:
selectfragment(2);
break;
case R.id.id_tab_settings:
selectfragment(3);
break;
}
}
}
- 作业心得
根据老师课程内容完成了代码的复现,理解了后台代码利用fragment进行切换以及根据点击事件更改图片样式的思路,但是对于布局的xml代码有些地方比较模糊,在布局方面耗费了一些时间,例如设置weight=1,height=0来调节布局的技巧就不能很好的理解。还是需要更多的项目进行锻炼,不断摸索。