Imitating Android APP 3 and imitating androidapp

Imitating Android APP 3 and imitating androidapp

This is followed by the previous blog, and the change is that after clicking LeftMenuFragment, The FirstFragment is displayed. Now, we need to use ViewPager + Fragment in FirstFragment to display more content.

The general effect is as follows:

The main idea is to add a layout file for FirstFragment, including Fragment + ViewPager, When you click to enter the FirstFragment content interface. Use the FragmentPagerAdapter to bind data.

The main code is as follows:

import java.util.ArrayList;import java.util.List;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.Display;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.ViewGroup.LayoutParams;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import com.example.mytoolbar_04.R;import com.example.mytoolbar_04.fragment.firstFragments.Tab01;import com.example.mytoolbar_04.fragment.firstFragments.Tab02;import com.example.mytoolbar_04.fragment.firstFragments.Tab03;public class FirstFragment extends Fragment implements OnClickListener{private View mFirstFragmentView;private ViewPager mViewPager;private TextView tab_01;private TextView tab_02;private TextView tab_03;private ImageView mImageView;private FragmentPagerAdapter mAdapter;private List<Fragment> datas;private int width_1_3;private int currentPadgeIndex = 0;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){mFirstFragmentView = inflater.inflate(R.layout.first_page, null);intiView();intiEvent();initTabline();Tab01 view_01 = new Tab01();Tab02 view_02 = new Tab02();Tab03 view_03 = new Tab03();datas = new ArrayList<Fragment>();datas.add(view_01);datas.add(view_02);datas.add(view_03);mAdapter = new FragmentPagerAdapter(getFragmentManager()){public int getCount(){return datas.size();}public Fragment getItem(int arg0){return datas.get(arg0);}};mViewPager.setAdapter(mAdapter);mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());return mFirstFragmentView;}class MyOnPageChangeListener implements OnPageChangeListener{public void onPageScrollStateChanged(int arg0){}public void onPageScrolled(int arg0, float arg1, int arg2){LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mImageView    .getLayoutParams();if (currentPadgeIndex == arg0){lp.leftMargin = (int) (width_1_3 * (currentPadgeIndex + arg1));} else{lp.leftMargin = (int) (width_1_3 * (currentPadgeIndex - 1 + arg1));}mImageView.setLayoutParams(lp);}@Overridepublic void onPageSelected(int arg0){resetTextColor();switch (arg0){case 0:tab_01.setTextColor(Color.parseColor("#008000"));break;case 1:tab_02.setTextColor(Color.parseColor("#008000"));break;case 2:tab_03.setTextColor(Color.parseColor("#008000"));break;}currentPadgeIndex = arg0;}}private void initTabline(){Display display = getActivity().getWindow().getWindowManager().getDefaultDisplay();DisplayMetrics outMetrics = new DisplayMetrics();display.getMetrics(outMetrics);width_1_3 = outMetrics.widthPixels / 3;LayoutParams lp = mImageView.getLayoutParams();lp.width = width_1_3;mImageView.setLayoutParams(lp);}private void intiEvent(){tab_01.setOnClickListener(this);tab_02.setOnClickListener(this);tab_03.setOnClickListener(this);}private void intiView(){mViewPager = (ViewPager) mFirstFragmentView.findViewById(R.id.id_viewPager);tab_01 = (TextView) mFirstFragmentView.findViewById(R.id.id_fist_tab);tab_02 = (TextView) mFirstFragmentView.findViewById(R.id.id_second_tab);tab_03 = (TextView) mFirstFragmentView.findViewById(R.id.id_third_tab);mImageView = (ImageView) mFirstFragmentView.findViewById(R.id.id_imageView);}@Overridepublic void onClick(View v){resetTextColor();LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mImageView    .getLayoutParams();lp.width = width_1_3;switch (v.getId()){case R.id.id_fist_tab:lp.leftMargin = 0;tab_01.setTextColor(Color.parseColor("#008000"));mViewPager.setCurrentItem(0);break;case R.id.id_second_tab:lp.leftMargin = width_1_3;tab_02.setTextColor(Color.parseColor("#008000"));mViewPager.setCurrentItem(1);break;case R.id.id_third_tab:lp.leftMargin = width_1_3 * 2;mViewPager.setCurrentItem(2);tab_03.setTextColor(Color.parseColor("#008000"));break;}mImageView.setLayoutParams(lp);}private void resetTextColor(){tab_01.setTextColor(Color.parseColor("#000000"));tab_02.setTextColor(Color.parseColor("#000000"));tab_03.setTextColor(Color.parseColor("#000000"));}}

Layout file of FirstFragment

<? 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"> <LinearLayout android: id = "@ + id/id_titlebar" android: layout_width = "match_parent" android: layout_height = "40dp" android: orientation = "horizontal"> <TextView android: id = "@ + id/id_fist_tab" android: layout_width = "wrap_content" android: layout_height = "match_parent" android: layout_weight = "1" android: gravity = "center" android: text = "Cantonese Opera Songs" android: textSize = "16sp"/> <TextView android: id = "@ + id/id_second_tab" android: layout_width = "wrap_content" android: layout_height = "match_parent" android: layout_weight = "1" android: gravity = "center" android: text = "Cantonese Opera image" android: textSize = "16sp"/> <TextView android: id = "@ + id/id_third_tab" android: layout_width = "wrap_content" android: layout_height = "match_parent" android: layout_weight = "1" android: gravity = "center" android: text = "Cantonese Opera News" android: textSize = "16sp"/> </LinearLayout> <ImageView android: id = "@ + id/id_imageView" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: background = "@ drawable/tabline"/> <android. support. v4.view. viewPager android: id = "@ + id/id_viewPager" android: layout_width = "match_parent" android: layout_height = "match_parent"> </android. support. v4.view. viewPager> </LinearLayout>

Then, the Fragment nested in FirstFragment only contains a TextView. When necessary, add a Complex layout for them and process the corresponding event. For example, to display a news list, click ListVIew, and then start an Activity to display the details of the list, which is similar to Netease news client.

Click Download source code: source code download