移动技术开发(1)-APP门户设计

一. 预览效果

主界面

好友

通讯录

设置

二. 核心技术与关键步骤

• 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门户设计。

源码地址：
https://gitee.com/morenmoren/android-app_-tab