即时通讯开发——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 implements
		OnPageChangeListener, OnClickListener {

	private Button btn_chat, btn_contact, btn_more;
	private ViewPager mViewPager;
	private List<Fragment> mDatas;
	private MyViewPagerAdapter mAdapter;
	private int currentIndex;

	@Override
	protected 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());
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	/**
	 * ViewPager滚动状态改变时调用此方法
	 */
	@Override
	public void onPageScrollStateChanged(int arg0) {

	}

	/**
	 * ViewPager滚动时调用此方法
	 */
	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
	}

	/**
	 * 基本在此调用
	 */
	@Override
	public 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
	 */
	@Override
	public 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 {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.chat_view,null);
	}
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.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>

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


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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值