即时通讯开发——Fragment+ViewPager滑动主界面

   今天开始想尝试下一直以来很想要开发的即时通讯APP开发工作，但鉴于毕业设计的论文的提交日期渐渐临近，外加上公司时不时给的工作任务，真心不知道自己能否坚持下去，但是想通过博客刺激下自己吧，看是否能通过博客的更新来加快或者调动自己开发的积极性。首先本人对这块的知识点的了解真是少之又少，但是比较即时通讯是个大趋势，这块的技术真的不能丢，于是狠下心买下了一个课程，那就跟着课程掌握这块知识点的开发工作吧，当然，界面会有很大不同，会根据个人对于界面的喜好，编写自己的界面风格。所以，今天的界面风格的搭建也是纯粹根据个人喜好编码形成的，也没什么难度，有点略像网易新闻的滑动效果。

   大概技术实现：Fragment+ViewPager

   通过代码实现起来不是很难，整体的布局列表为：

下面我会通过直接po上代码的方式进行整体上的描述：

主界面代码(MainActivity)：

package com.jrue.instantchat;import java.util.ArrayList;import java.util.List;import com.jrue.instantchat.adapter.MyViewPagerAdapter;import com.jrue.instantchat.fragments.ChatFragment;import com.jrue.instantchat.fragments.ContactFragment;import com.jrue.instantchat.fragments.MoreFragment;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.TypedValue;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;public class MainActivity extends FragmentActivity implementsOnPageChangeListener, OnClickListener {private Button btn_chat, btn_contact, btn_more;private ViewPager mViewPager;private List<Fragment> mDatas;private MyViewPagerAdapter mAdapter;private int currentIndex;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();mAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), mDatas);mViewPager.setAdapter(mAdapter);mViewPager.setOnPageChangeListener(this);}/** * 初始化控件 */private void initView() {currentIndex = 0;mViewPager = (ViewPager) findViewById(R.id.vp_content);btn_chat = (Button) findViewById(R.id.btn_chat);btn_contact = (Button) findViewById(R.id.btn_contact);btn_more = (Button) findViewById(R.id.btn_more);btn_chat.setOnClickListener(this);btn_contact.setOnClickListener(this);btn_more.setOnClickListener(this);btn_chat.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 8, getResources().getDisplayMetrics()));btn_chat.setTextColor(Color.parseColor("#41AAF1"));mDatas = new ArrayList<Fragment>();mDatas.add(new ChatFragment());mDatas.add(new ContactFragment());mDatas.add(new MoreFragment());}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}/** * ViewPager滚动状态改变时调用此方法 */@Overridepublic void onPageScrollStateChanged(int arg0) {}/** * ViewPager滚动时调用此方法 */@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}/** * 基本在此调用 */@Overridepublic void onPageSelected(int position) {resetButton();switch (position) {case 0:btn_chat.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 8, getResources().getDisplayMetrics()));btn_chat.setTextColor(Color.parseColor("#41AAF1"));break;case 1:btn_contact.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 8, getResources().getDisplayMetrics()));btn_contact.setTextColor(Color.parseColor("#41AAF1"));break;case 2:btn_more.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 8, getResources().getDisplayMetrics()));btn_more.setTextColor(Color.parseColor("#41AAF1"));break;}currentIndex = position;}/** * 对Button进行重置 */private void resetButton() {// 设置聊天按钮为默认属性btn_chat.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 6, getResources().getDisplayMetrics()));btn_chat.setTextColor(Color.parseColor("#969696"));// 设置联系人按钮为默认属性btn_contact.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 6, getResources().getDisplayMetrics()));btn_contact.setTextColor(Color.parseColor("#969696"));// 设置更多按钮为默认属性btn_more.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 6, getResources().getDisplayMetrics()));btn_more.setTextColor(Color.parseColor("#969696"));}/** * 点击事件处理 *  * @param v */@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btn_chat:currentIndex = 0;break;case R.id.btn_contact:currentIndex = 1;break;case R.id.btn_more:currentIndex = 2;break;}mViewPager.setCurrentItem(currentIndex);}}

注释也比较详细了，也不多讲解了，而且代码阅读的难度上不是很高，很容易理解。

几个Fragment的代码：

 ChatFragment(每个Fragment的代码基本相同，这里只po上一个作为示例)：

package com.jrue.instantchat.fragments;import com.jrue.instantchat.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/** * @author jruelee * */public class ChatFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {return inflater.inflate(R.layout.chat_view,null);}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onActivityCreated(savedInstanceState);}}

当然少不过的布局文件代码：

这块就更美难度了：

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" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="45dp"        android:orientation="horizontal" >        <Button            android:id="@+id/btn_chat"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@null"            android:text="聊天"            android:textColor="@color/tab_bg" />        <Button            android:id="@+id/btn_contact"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@null"            android:text="联系人"            android:textColor="@color/tab_bg"/>        <Button            android:id="@+id/btn_more"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="@null"            android:text="更多"            android:textColor="@color/tab_bg"/>    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vp_content"        android:layout_width="match_parent"        android:layout_height="match_parent"/></LinearLayout>

chat_view/xml(同理，这几个fragment布局也是相同的，只po上一个作为示例)：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="聊天界面"        android:textSize="30sp"/></RelativeLayout>

最后顺便奉上效果图吧，挺喜欢这种效果的，而且自己真的很喜欢蓝色，所以以前开发的应用色调全是蓝色的 ==

如果需要源码的话，晚点再上传吧。