今天开始想尝试下一直以来很想要开发的即时通讯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>
最后顺便奉上效果图吧,挺喜欢这种效果的,而且自己真的很喜欢蓝色,所以以前开发的应用色调全是蓝色的 ==
如果需要源码的话,晚点再上传吧。