Instant Messaging development-Fragment + ViewPager sliding main interface, fragmentviewpager

Instant Messaging development-Fragment + ViewPager sliding main interface, fragmentviewpager

Today, I want to try the instant messaging APP development work that I have always wanted to develop. However, given that the graduation design paper is approaching and the work tasks assigned by the company from time to time, I really don't know if I can stick to it, but I want to stimulate myself through my blog to see if I can speed up or mobilize my development enthusiasm through blog updates. First of all, I have little or no knowledge about this piece of knowledge, but instant messaging is a general trend, and this piece of technology can't be lost, so I finally bought a course, follow the development work of the course to master this knowledge point. Of course, the interface will be very different. I will write my own interface style based on my personal preferences on the interface. Therefore, the establishment of today's interface style is purely based on personal preferences, and there is no difficulty, a little like the sliding effect of Netease news.

Rough technical implementation: Fragment + ViewPager

It is not difficult to implement the Code. The overall layout list is:

Next, I will describe the code on the po directly:

Main Interface code (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 listener, 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);}/*** initialization control */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;}/*** call this method when the ViewPager rolling status changes */@ Overridepublic void onPageScrollStateChanged (int arg0) {}/*** call this method when ViewPager scrolls */@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}/*** basically called here */@ 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;}/*** reset the Button */private void resetButton () {// set the chat button to the default attribute btn_chat.setTextSize (TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_SP, 6, getResources (). getDisplayMetrics (); btn_chat.setTextColor (Color. parseColor ("#969696"); // set the contact button to the default attribute btn_contact.setTextSize (TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_SP, 6, getResources (). getDisplayMetrics (); btn_contact.setTextColor (Color. parseColor ("#969696"); // set more buttons to the default attribute btn_more.setTextSize (TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_SP, 6, getResources (). getDisplayMetrics (); btn_more.setTextColor (Color. parseColor ("#969696");}/*** Click Event Processing ** @ 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 );}}

The annotations are also detailed, and I will not explain them much more. Besides, the code reading is not very difficult and easy to understand.

Several Fragment codes:

ChatFragment (the Code of each Fragment is basically the same, here only the previous po is used as an example ):

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);}}

Of course there are few layout file codes:

This is more difficult:

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 = "chat" 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 = "Contact" 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 = "more" 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 (likewise, these fragment la s are the same, and only the previous po is used as an example ):

<? 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 = "chat interface" android: textSize = "30sp"/> </RelativeLayout>

In the end, I like this effect, and I really like blue, so the colors of the previously developed applications are all Blue =

If you need the source code, upload it later.