一. 预览效果
主界面
好友
通讯录
设置
二. 核心技术与关键步骤
- Fragment：正如Fragment的名字–碎片，它的出现是为了解决Android碎片化 ，它可作为Activity界面的组成部分，可在Activity运行中实现动态地加入、移除和交换。一个Activity中可同时出现多个Fragment，一个Fragment也可在多个Activity中使用。
1. 创建4个layout.xml文件，分别对应了主界面，好友，通讯录，设置。
主界面（weixin_tab.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" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/weixin"/>"
</LinearLayout>
好友（frd_tab.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" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/frd"/>
</LinearLayout>
通讯录（add_tab.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" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/add"/>
</LinearLayout>
设置（setting_tab.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" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/setting"/>
</LinearLayout>
二. 新建四个Fragment类并继承Fragment，然后重写onCreateView()方法。
- 这个方法里通过LayoutInflater的inflate()方法将刚刚定义的布局加载进来并得到一个View.
//主界面Fragment
public class WeiXinFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.weixin_tab, container, false);
}
}
//好友Fragment
public class FrdFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.frd_tab, container, false);
return view;
}
}
//通讯录Fragment
public class AddFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.add_tab, container, false);
return view;
}
}
//设置Fragment
public class SettingFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.setting_tab, container, false);
}
}
三. 新建activity_main.xml，作为Activity的布局。
- 使用< fragment>标签添加碎片。
activity_main.xml：
<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/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>
四. 在MainActivity中加载main布局。
- 现在Fragment就完成了静态加载到MainActivity中，这时碎片里的控件自然也是活动的一个部分，可直接在活动中获取到Button的实例，来注册点击事件了。
public class MainActivity extends Activity implements OnClickListener{
public LinearLayout weixin_tab;
public LinearLayout frd_tab;
public LinearLayout add_tab;
public LinearLayout setting_tab;
public ImageButton weixin_img;
public ImageButton frd_img;
public ImageButton add_img;
public ImageButton setting_img;
public WeiXinFragment weixin_fragment;
public FrdFragment frd_fragment;
public AddFragment add_fragment;
public SettingFragment setting_fragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
intViews();
intEvents();
setContent(0);
}
private void intViews() {
weixin_tab=(LinearLayout) findViewById(R.id.weixin_tab);
frd_tab=(LinearLayout) findViewById(R.id.frd_tab);
add_tab=(LinearLayout) findViewById(R.id.add_tab);
setting_tab=(LinearLayout) findViewById(R.id.setting_tab);
weixin_img=(ImageButton) findViewById(R.id.weixin_img);
frd_img=(ImageButton) findViewById(R.id.frd_img);
add_img=(ImageButton) findViewById(R.id.add_img);
setting_img=(ImageButton) findViewById(R.id.setting_img);
weixin_fragment=new WeiXinFragment();
frd_fragment=new FrdFragment();
add_fragment=new AddFragment();
setting_fragment=new SettingFragment();
}
private void intEvents() {
weixin_tab.setOnClickListener(this);
frd_tab.setOnClickListener(this);
add_tab.setOnClickListener(this);
setting_tab.setOnClickListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
private void setContent(int item) {
FragmentManager fm=getFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
switch(item){
case 0:
transaction.replace(R.id.content,weixin_fragment);
weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.replace(R.id.content,frd_fragment);
frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.replace(R.id.content,add_fragment);
add_img.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.replace(R.id.content,setting_fragment);
setting_img.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
@Override
public void onClick(View v) {
resetImage();
switch(v.getId()){
case R.id.weixin_tab:
setContent(0);
break;
case R.id.frd_tab:
setContent(1);
break;
case R.id.add_tab:
setContent(2);
break;
case R.id.setting_tab:
setContent(3);
break;
default:
break;
}
}
private void resetImage() {
weixin_img.setImageResource(R.drawable.tab_weixin_normal);
frd_img.setImageResource(R.drawable.tab_find_frd_normal);
add_img.setImageResource(R.drawable.tab_address_normal);
setting_img.setImageResource(R.drawable.tab_settings_normal);
}
}
如此便完成了基本的APP门户设计。
