Mogujie.com interface (2) and mogujie.com Interface

Mogujie.com interface (2) and mogujie.com Interface

Previous blog, blog address ghost. Today, we will focus on imitating the first menu at the bottom, "love shopping". First, we will break down the functional areas:

1. Functional Area Decomposition

(1) PageTabs left and right switching menu: here we use third-party open-source plug-in, but we need to modify it ourselves. We use ViewPage to switch pages and slide between left and right.

(2) image carousel: ViewGroup + Viewpage each ViewGroup stores a dot and an image with a pressing effect. As the fingers slide, the image is switched. Of course, only five images are used here.

(3) Update time: if this is not mentioned, set the time. I cannot find the image here and set the fixed value myself. Of course, you can also set it through code.

(4) The first and second lists. We can see that the sizes of the following two la s occupy the average screen respectively. We can set the size by setting the weight attribute, that is

<span style="white-space:pre"></span>android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="2"

The first layout is linear layout, which includes a TextView Control for updating time and a GridView control. The second layout is a separate GridView control.

2. Implementation Method

(1) PageTabs:

The first difficulty is undoubtedly the PageTabs menu. Fortunately, there are many open-source components in this regard. We can use PagerSlidingTabStrip recommended by the big God Guo. Of course we also need to modify it, including the color of the horizontal bar. Each PageTabs is a Fragment, because the put PageTabs itself is a Fragment, so we need to note that the current FragmentManager must be used in the Fragment Manager, otherwise, an error is reported.

<?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"     android:background="#EEEEEE">     <com.blog.mogujie.tool.PagerSlidingTabStrip        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="40dp" /> <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="wrap_content" /> </LinearLayout>

PagerSlidingTabStrip is a custom control, that is, a third-party plug-in. ViewPager is used to display the size of each page. However, you must modify the length of the scroll bar as follows:

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (isInEditMode() || tabCount == 0) {return;}final int height = getHeight();// draw underlinerectPaint.setColor(underlineColor);canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);// draw indicator linerectPaint.setColor(indicatorColor);// default: line below current tabView currentTab = tabsContainer.getChildAt(currentPosition);float lineLeft = currentTab.getLeft();float lineRight = currentTab.getRight();// if there is an offset, start interpolating left and right coordinates between current and next tabif (currentPositionOffset > 0f && currentPosition < tabCount - 1) {View nextTab = tabsContainer.getChildAt(currentPosition + 1);final float nextTabLeft = nextTab.getLeft();final float nextTabRight = nextTab.getRight();lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft);lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight);}canvas.drawRect(lineLeft+100, height - indicatorHeight, lineRight-100, height, rectPaint);// draw dividerdividerPaint.setColor(dividerColor);for (int i = 0; i < tabCount - 1; i++) {View tab = tabsContainer.getChildAt(i);canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint);}}

This is the first line.

Canvas. drawRect (lineLeft + 100, height-indicatorHeight, lineRight-100, height, rectPaint );

This line of lineLeft + 100, the lineRight-100 is set to both sides at the same time reduce the length of 100.

Set the IndexFragment code, which is the "selected" menu area Fragment. The Code is as follows:

Public class IndexFragment extends Fragment {private PagerSlidingTabStrip tabs; private DisplayMetrics dm; private String [] titles = {"featured", "matched", "group buying"}; private ViewPager pager; private Fragment fragment; @ Overridepublic void onActivityCreated (Bundle savedInstanceState) {super. onActivityCreated (savedInstanceState); dm = getResources (). getDisplayMetrics (); pager = (ViewPager) getView (). findViewById (R. id. pager); tabs = (PagerSlidingTabStrip) getView (). findViewById (R. id. tabs); // because fragment is nested, getActivity () cannot be directly transmitted here (). getsuppfrfragmentmanager (), which returns the parent fragment // The FragmentManager () of the current fragment and returns the current fragmentpager. setAdapter (new PagerAdapter (this. getChildFragmentManager (); tabs. setViewPager (pager); InitTabsConfig () ;}@ Overridepublic View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater. inflate (R. layout. fragment_index, container, false);} private void InitTabsConfig () {// set the Tab to automatically fill the tabs on the screen. setShouldExpand (true); // set the Tab line to transparent tabs. setDividerColor (Color. TRANSPARENT); // set the height of the line at the bottom of the Tab. setUnderlineHeight (int) TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_DIP, 1, dm); // sets the height of the Tab Indicator tabs. setIndicatorHeight (int) TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_DIP, 2, dm); // set the text size of the Tab title tabs. setTextSize (int) TypedValue. applyDimension (TypedValue. COMPLEX_UNIT_SP, 16, dm); // sets the color of Tab Indicator tabs. setIndicatorColor (getResources (). getColor (R. color. red); // set the color of the Selected Tab text tabs. setSelectedTextColor (getResources (). getColor (R. color. red); // cancel the background color tabs when you click Tab. setTabBackground (0);}/*** Here it should inherit FragmentStatePagerAdapter * FragmentStatePagerAdapter should be used for pages with large data volumes, instead of FragmentPagerAdapter */public class PagerAdapter extends FragmentStatePagerAdapter {public PagerAdapter (FragmentManager fm) {super (fm) ;}@ Overridepublic CharSequence getPageTitle (int position) {return titles [position];} @ Overridepublic int getCount () {return titles. length ;}@ Override public Fragment getItem (int position) {switch (position) {case 0: fragment = new GoodsFargment (); break; case 1: fragment = new ShopingsFragment (); break; case 2: fragment = new MatchFragment (); break; default: break;} return fragment ;}}}

Note that this is used here. getChildFragmentManager () indicates that the current Fragment is a child Fragment. getActivity () cannot be used (). getsuppfrfragmentmanager (). Otherwise, an error occurs during the switchover. The second place is row X. Here, FragmentStatePagerAdapte is inherited, not FragmentPagerAdapter.

(2) image carousel

We know that the response mechanism of the OnTouch event is a step-by-step response, and it will automatically respond to the bottom-layer View. Therefore, considering the image rotation needs to slide left and right, and PageTabs will also Slide left and right, in addition, PageTabs is at the next layer of the image rotation View. If the native control is used, the system will first respond to PageTabs without responding to the image slide of the ViewPage. Therefore, you need to consider rewriting the ViewPager control, make the control only respond to its own left and right sliding events. The left and right sliding events of its parent View do not respond.

Public class ChildViewPager extends ViewPager {public ChildViewPager (Context context, AttributeSet attrs) {super (context, attrs); // TODO Auto-generated constructor stub} public ChildViewPager (Context context Context) {super (context); // TODO Auto-generated constructor stub} @ Overridepublic boolean onInterceptTouchEvent (MotionEvent arg0) {// return true when the interception touch event reaches this position, // indicates that onTouch is intercepted in this control and the onTouchEventreturn true;} @ Overridepublic boolean onTouchEvent (MotionEvent arg0) {getParent () is executed (). requestDisallowInterceptTouchEvent (true); return super. onTouchEvent (arg0 );}}

Few codes, mainly getParent (). requestDisallowInterceptTouchEvent (true );

Setting the parent control does not respond to the OnTouch event. Instead, it is handed over to the onTouchEvent event of the current control to prevent PageTabS from sliding and respond to the sliding event of the current control.

Finally, this is the ViewPage data adapter. add images and points, move left and right, and define the ImgaePagerAdapter class. The Code is as follows:

Public class ImgaePagerAdapter extends PagerAdapter {ImageView [] mImageViews; public ImgaePagerAdapter (ImageView [] mImageViews) {this. mImageViews = mImageViews;} // gets the number of controls to slide @ Overridepublic int getCount () {return Integer. MAX_VALUE;} // determines whether the display is the same image. Here we can compare the two parameters and return the result @ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1;} // If the sliding image of PagerAdapter is out of the cache range, this method is called to destroy the image @ Overridepublic void destroyItem (View container, int position, Object object) {(ViewPager) container ). removeView (mImageViews [position % mImageViews. length]);}/*** read the image cyclically, take the remainder */@ Overridepublic Object instantiateItem (View container, int position) {(ViewPager) container ). addView (mImageViews [position % mImageViews. length], 0); return mImageViews [position % mImageViews. length] ;}}

The circular image code is mainly placed in instantiateItem. This event adds the image to the container and returns the Image view, in addition, the returned image returns the remainder of the current position and the total length of the image. The remainder is used to determine whether a loop is performed.

Call the following code in Fragment to bind the data adapter.

ViewPager. setAdapter (new ImgaePagerAdapter (mImageViews ));

ViewPager. setOnPageChangeListener (this );

(3) Controls

The list control here is used to display the basic information of selected clothes. We first thought of the GridView control by combining images and texts. This idea is correct; however, we noticed that the entire layout of the "selected" menu is controlled by the ScrollView control to move up and down together. If the GridView control is used alone, the GridView control will not display properly in the ScrollView, therefore, we should customize the GirdView so that it cannot slide and adapt to the size of the ScrollView control. Define the MyGridView control:

Public class ImgaePagerAdapter extends PagerAdapter {ImageView [] mImageViews; public ImgaePagerAdapter (ImageView [] mImageViews) {this. mImageViews = mImageViews;} // gets the number of controls to slide @ Overridepublic int getCount () {return Integer. MAX_VALUE;} // determines whether the display is the same image. Here we can compare the two parameters and return the result @ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1;} // If the sliding image of PagerAdapter is out of the cache range, this method is called to destroy the image @ Overridepublic void destroyItem (View container, int position, Object object) {(ViewPager) container ). removeView (mImageViews [position % mImageViews. length]);}/*** read the image cyclically, take the remainder */@ Overridepublic Object instantiateItem (View container, int position) {(ViewPager) container ). addView (mImageViews [position % mImageViews. length], 0); return mImageViews [position % mImageViews. length] ;}}

When drawing the size of the GridView control, you can set the MeasureSpec. AT_MOST parameter to specify the desired height of the control and draw the GridView through the onMeasure event. Reference <com. blog. mogujie. tool. MyGridView.../> in the XML layout. The layout file code will not be pasted if it is too long. The Code download link will be provided later.

Then define the adapter of the GridView file. The Code is as follows. Pay attention to the optimize settings of the GridView:

public class GrdoneAdapter extends BaseAdapter{private Context mContext;private List<GrdOneInfo> mGrdOneInfoList;public GrdoneAdapter(Context mContext,List<GrdOneInfo> mGrdOneInfoList){this.mContext=mContext;this.mGrdOneInfoList=mGrdOneInfoList;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mGrdOneInfoList.size();}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {View view = convertView;final ViewHolder holder;if (convertView == null) {view = ((Activity) mContext).getLayoutInflater().inflate(R.layout.item_grd1, parent, false);holder = new ViewHolder();holder.image = (ImageView) view.findViewById(R.id.grdimage);holder.brife= (TextView) view.findViewById(R.id.brife1);holder.price= (TextView) view.findViewById(R.id.price);holder.marks= (TextView) view.findViewById(R.id.marks);view.setTag(holder);} else {holder = (ViewHolder) view.getTag();}holder.image.setImageResource(mGrdOneInfoList.get(position).imagePath);if(mGrdOneInfoList.get(position).brife.length()>50){holder.brife.setText(mGrdOneInfoList.get(position).brife.subSequence(0, 30)+"...");}else{holder.brife.setText(mGrdOneInfoList.get(position).brife);}holder.price.setText(mGrdOneInfoList.get(position).price);holder.marks.setText(mGrdOneInfoList.get(position).marksNum);return view;}static class ViewHolder{ImageView image;TextView brife;TextView price;TextView marks;}}

The final result is as follows:

 

The resource address is click to open the link. Today we are here.

Using a computer to log on to mogujie.com, the webpage is very narrow, just like asking how to adjust it

You can adjust the page size in the lower right corner.

Which one is better than mogujie.com? 2

In fact, mogujie.com is almost the same, but it is always easier to use mogujie.com, And the beauty is usually more expensive.