仿蘑菇街界面应用

蘑菇街作为中国最大女性购物社区，其APP的设计水平也毋庸置疑的，最近博客将连续来仿造一个蘑菇街的APP的界面设计。

（1）准备工作

  在阅读郭霖大神的博客时有人问里面使用的美工素材怎么得到的，其实很简单，下载一个APP，把APK格式修改成rar后解压，你会在目录下看到所有的素材。

        随后，看看APP的界面：

第一个是启动界面，第二个是主界面，先来看第一个界面。

（1）启动界面（Splash）。

启动界面也叫Splash界面，是APP启动时的第一画面，主要用于介绍应用、宣传或者加载数据，或者兼而有之。这里之所以要单独拿出来是因为这个应用有个独特的，它的LOGO是透明渐变出现的，也就是淡入效果，我们知道Android主要有四种动画：透明动画、缩放、位移、旋转，分别使用的AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation，这里我们使用AlphaAnimation。

界面布局很简单，如activity_loading.xml:

新建一个LoadingActivity类：如下代码：

注意2个地方：a. AlphaAnimation aa = new AlphaAnimation(0.01f,1.0f); 构造方法：AlphaAnimation(float fromAlpha, float toAlpha)，表示从透明度0.01到1.0的渐变，我们知道0.0表示全透明，1.0表示完全不透明.

  b. onAnimationEnd方法，顾名思义，表示：在动画结束后自动执行这个方法，这里当然是跳转到主界面了。运行后其效果如下：

是不是很简单，以后做启动画面都可以采用类似的方法。

总结要点：AlphaAnimation类

（1）主界面。

看看原图，如下：

中间的内容先不管，我们看ActionBar和底部菜单，上面是一个自定义的ActionBar，下面是一个切换菜单，而且下面菜单在改变的时候上面的ActionBar也在变。我们这里采用的设计方法是fragment+activity混合使用，底部菜单使用RadioButton，中间留出一个活动的fragment

先来看ActionBar,观察发现ActionBar分为2类，第一个是图片标题，另外一个是文字标题。

其XML布局分别为：actionbar_index.xml

再来看看底部菜单：main.XML文件如下

接下来是mian 页面的切换代码，MainActivity.Java

今天我们来重点来仿照一下第一个底部菜单“爱逛”，首先我们来分解一下功能区域：

1.功能区域分解

  （1） PageTabs左右切换菜单：这里我们使用第三方开源插件，不过需要自己进行修改，采用的是ViewPage进行页面的切换，左右滑动。

（2） 图片轮播：ViewGroup+Viewpage每一个ViewGroup存储一个按压效果的dot和一张图片，随着手指的滑动进行图片之间的切换，当然我们这里只使用五张图片。

（3）更新时间：这个不说了，就是设置时间，这里找不到图片我自己设定固定值，当然也可以通过代码设置。

（4）第一个列表，第二个列表，我们观察布局可知，下面2个布局的大小是分别占用了屏幕的一般，我们可以通过设置权值属性来设置大小，也就是

[html]  view plain copy

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

第一个布局是线性布局的，线性布局里面包括一个更新时间的一些TextView控件和一个GridView控件，第二个布局是一个单独的GridView控件

2.实现方式

（1） PageTabs:

第一个难点毋庸置疑就是PageTabs菜单，所幸这方面的开源组件挺多，我们可以使用郭霖大神推荐的PagerSlidingTabStrip，当然也要进行修改，修改包括横条的颜色。每一个PageTabs就是一个Fragment，因为放置这个PageTabs的本身就是一个Fragment，所以我们需要注意，在使用FragmentManager()的地方，必须要使用当前Fragment的子FragmentManager，否则会报错。

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"   
6.     android:background="#EEEEEE">  
7.       
8.  <com.blog.mogujie.tool.PagerSlidingTabStrip  
9.         android:id="@+id/tabs"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="40dp" />  
12.   
13.  <android.support.v4.view.ViewPager  
14.         android:id="@+id/pager"  
15.         android:layout_width="match_parent"  
16.         android:layout_height="wrap_content" />  
17.    
18. </LinearLayout>  

PagerSlidingTabStrip为自定义控件，也就是第三方插件，ViewPager用来显示每一个页面的大小，但是注意到修改滚动条的长度，修改代码如下：

[java]  view plain copy

1. @Override  
2.     protected void onDraw(Canvas canvas) {  
3.         super.onDraw(canvas);  
4.   
5.         if (isInEditMode() || tabCount == 0) {  
6.             return;  
7.         }  
8.   
9.         final int height = getHeight();  
10.           
11.         // draw underline  
12.         rectPaint.setColor(underlineColor);  
13.         canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);  
14.   
15.         // draw indicator line  
16.         rectPaint.setColor(indicatorColor);  
17.   
18.         // default: line below current tab  
19.         View currentTab = tabsContainer.getChildAt(currentPosition);  
20.         float lineLeft = currentTab.getLeft();  
21.         float lineRight = currentTab.getRight();  
22.   
23.         // if there is an offset, start interpolating left and right coordinates between current and next tab  
24.         if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {  
25.   
26.             View nextTab = tabsContainer.getChildAt(currentPosition + 1);  
27.             final float nextTabLeft = nextTab.getLeft();  
28.             final float nextTabRight = nextTab.getRight();  
29.   
30.             lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft);  
31.             lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight);  
32.         }  
33.   
34.         canvas.drawRect(lineLeft+100, height - indicatorHeight, lineRight-100, height, rectPaint);  
35.   
36.         // draw divider  
37.   
38.         dividerPaint.setColor(dividerColor);  
39.         for (int i = 0; i < tabCount - 1; i++) {  
40.             View tab = tabsContainer.getChildAt(i);  
41.             canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint);  
42.         }  
43.     }  

主要看第这一行

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

这行lineLeft+100，lineRight-100设置左右两边同时减小100的长度。

设置IndexFragment代码，该代码就是“精选”菜单区域Fragment，代码如下：

[cpp]  view plain copy

1. public class IndexFragment extends Fragment {  
2.     private PagerSlidingTabStrip tabs;  
3.     private DisplayMetrics dm;  
4.     private String[] titles = { "精选", "搭配", "团购" };  
5.     private ViewPager pager;  
6.     private Fragment fragment;  
7.     @Override  
8.     public void onActivityCreated(Bundle savedInstanceState) {  
9.         super.onActivityCreated(savedInstanceState);  
10.         dm = getResources().getDisplayMetrics();  
11.         pager = (ViewPager) getView().findViewById(R.id.pager);  
12.         tabs = (PagerSlidingTabStrip) getView().findViewById(R.id.tabs);  
13.         //因为这里是嵌套使用fragment,所以这里不能直接传getActivity().getSupportFragmentManager()，他返回的是父fragment  
14.         //应当使用当前fragment的FragmentManager(),返回当前fragment  
15.         pager.setAdapter(new PagerAdapter(this.getChildFragmentManager()));  
16.         tabs.setViewPager(pager);  
17.         InitTabsConfig();  
18.     }  
19.   
20.     @Override  
21.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
22.             Bundle savedInstanceState) {  
23.         return inflater.inflate(R.layout.fragment_index, container, false);  
24.     }  
25.       
26.     private void InitTabsConfig() {  
27.         // 设置Tab是自动填充满屏幕的  
28.         tabs.setShouldExpand(true);  
29.         // 设置Tab的分割线是透明的  
30.         tabs.setDividerColor(Color.TRANSPARENT);  
31.         // 设置Tab底部线的高度  
32.         tabs.setUnderlineHeight((int) TypedValue.applyDimension(  
33.                 TypedValue.COMPLEX_UNIT_DIP, 1, dm));  
34.         // 设置Tab Indicator的高度  
35.         tabs.setIndicatorHeight((int) TypedValue.applyDimension(  
36.                 TypedValue.COMPLEX_UNIT_DIP, 2, dm));  
37.         // 设置Tab标题文字的大小  
38.         tabs.setTextSize((int) TypedValue.applyDimension(  
39.                 TypedValue.COMPLEX_UNIT_SP, 16, dm));  
40.         // 设置Tab Indicator的颜色  
41.         tabs.setIndicatorColor(getResources().getColor(R.color.red));  
42.         // 设置选中Tab文字的颜色  
43.         tabs.setSelectedTextColor(getResources().getColor(R.color.red));  
44.         // 取消点击Tab时的背景色  
45.         tabs.setTabBackground(0);  
46.     }  
47.   
48.     /** 
49.      * 此处应当继承FragmentStatePagerAdapter 
50.      * 在处理数据量较大的页面应当使用FragmentStatePagerAdapter，而不是FragmentPagerAdapter 
51.      */  
52.     public class PagerAdapter extends FragmentStatePagerAdapter {  
53.         public PagerAdapter(FragmentManager fm) {  
54.             super(fm);  
55.         }  
56.   
57.         @Override  
58.         public CharSequence getPageTitle(int position) {  
59.             return titles[position];  
60.         }  
61.   
62.         @Override  
63.         public int getCount() {  
64.             return titles.length;  
65.         }  
66.           
67.         @Override    
68.         public Fragment getItem(int position) {  
69.             switch (position) {  
70.                 case 0:  
71.                     fragment = new GoodsFargment();  
72.                     break;  
73.                 case 1:  
74.                     fragment = new ShopingsFragment();  
75.                     break;  
76.                 case 2:  
77.                     fragment = new MatchFragment();  
78.                     break;  
79.                 default:  
80.                     break;  
81.             }  
82.             return fragment;  
83.         }  
84.   
85.     }  
86.   
87. }  

注意到代码，这里使用this.getChildFragmentManager()来表示当前的Fragment为子Fragment，不能使用getActivity().getSupportFragmentManager()，否则在切换时候会出错，第二个地方为第X行，这里继承的是 FragmentStatePagerAdapte，而非FragmentPagerAdapter。

 （2）图片轮播

  我们知道OnTouch事件的响应机制是逐级响应的，他会自动响应最底层的View，因此考虑到图片轮播需要左右滑动，而PageTabs也会左右滑动，并且PageTabs在图片轮转View的下一层，如果使用原生控件，系统会优先响应PageTabs而不会响应ViewPage的图片滑动；因此需要考虑，重写ViewPager控件,让该控件只会响应自己的左右滑动事件，其父视图的View左右滑动事件不响应。

[java]  view plain copy

1. public class ChildViewPager extends ViewPager {  
2.     public ChildViewPager(Context context, AttributeSet attrs) {  
3.         super(context, attrs);  
4.         // TODO Auto-generated constructor stub  
5.     }  
6.   
7.     public ChildViewPager(Context context) {  
8.         super(context);  
9.         // TODO Auto-generated constructor stub  
10.     }  
11.   
12.     @Override  
13.     public boolean onInterceptTouchEvent(MotionEvent arg0) {  
14.         // 当拦截触摸事件到达此位置的时候，返回true，  
15.         // 说明将onTouch拦截在此控件，进而执行此控件的onTouchEvent  
16.         return true;  
17.     }  
18.   
19.   
20.     @Override  
21.     public boolean onTouchEvent(MotionEvent arg0) {  
22.         getParent().requestDisallowInterceptTouchEvent(true);  
23.         return super.onTouchEvent(arg0);  
24.     }  
25. }  

设置父控件不响应OnTouch事件，而是交给当前控件的onTouchEvent事件，从而阻止PageTabS的滑动，响应当前控件的滑动事件

最后这是ViewPage的数据适配器，添加图片和点，进行左右的移动，定义ImgaePagerAdapter适配器类，其代码如下：

[java]  view plain copy

1. public class ImgaePagerAdapter extends PagerAdapter {  
2.   
3.     ImageView[] mImageViews;  
4.   
5.     public ImgaePagerAdapter(ImageView[] mImageViews) {  
6.         this.mImageViews = mImageViews;  
7.     }  
8.     //获取要滑动的控件的数量  
9.     @Override  
10.     public int getCount() {  
11.         return Integer.MAX_VALUE;  
12.     }  
13.     //来判断显示的是否是同一张图片，这里我们将两个参数相比较返回即可    
14.     @Override  
15.     public boolean isViewFromObject(View arg0, Object arg1) {  
16.         return arg0 == arg1;  
17.     }  
18.     //PagerAdapter如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁    
19.     @Override  
20.     public void destroyItem(View container, int position, Object object) {  
21.           
22.         ((ViewPager) container).removeView(mImageViews[position  
23.                 % mImageViews.length]);  
24.   
25.     }  
26.   
27.     /** 
28.      *循环读取图片，取余数 
29.      */  
30.     @Override  
31.     public Object instantiateItem(View container, int position) {  
32.         ((ViewPager) container).addView(mImageViews[position  
33.                 % mImageViews.length], 0);  
34.         return mImageViews[position % mImageViews.length];  
35.     }  
36.   
37. }  

在Fragment中调用如下的代码对数据适配器的绑定

viewPager.setAdapter(new ImgaePagerAdapter(mImageViews));

viewPager.setOnPageChangeListener(this);

（3)控件

这里的列表控件用来显示精选衣服基本信息，使用图片加文字的组合方式，我们第一反应想到的是GridView控件，这个想法是对的；可是我们注意到“精选”菜单的整个布局是使用ScrollView控件来控制上下一起移动的，如果单纯使用GridView控件的话，GridView控件在ScrollView中会显示不正常，所以我们应当自定义GirdView让它不能滑动，并且适配ScrollView控件的大小。定义MyGridView控件：

[java]  view plain copy

1. public class ImgaePagerAdapter extends PagerAdapter {  
2.   
3.     ImageView[] mImageViews;  
4.   
5.     public ImgaePagerAdapter(ImageView[] mImageViews) {  
6.         this.mImageViews = mImageViews;  
7.     }  
8.     //获取要滑动的控件的数量  
9.     @Override  
10.     public int getCount() {  
11.         return Integer.MAX_VALUE;  
12.     }  
13.     //来判断显示的是否是同一张图片，这里我们将两个参数相比较返回即可    
14.     @Override  
15.     public boolean isViewFromObject(View arg0, Object arg1) {  
16.         return arg0 == arg1;  
17.     }  
18.     //PagerAdapter如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁    
19.     @Override  
20.     public void destroyItem(View container, int position, Object object) {  
21.           
22.         ((ViewPager) container).removeView(mImageViews[position  
23.                 % mImageViews.length]);  
24.   
25.     }  
26.   
27.     /** 
28.      *循环读取图片，取余数 
29.      */  
30.     @Override  
31.     public Object instantiateItem(View container, int position) {  
32.         ((ViewPager) container).addView(mImageViews[position  
33.                 % mImageViews.length], 0);  
34.         return mImageViews[position % mImageViews.length];  
35.     }  
36.   
37. }  

然后再定义该GridView文件的适配器,代码如下，注意GridView的优化设置：

[java]  view plain copy

1. public class GrdoneAdapter extends BaseAdapter{  
2.   
3.     private Context mContext;  
4.     private List<GrdOneInfo> mGrdOneInfoList;  
5.     public GrdoneAdapter(Context mContext,List<GrdOneInfo> mGrdOneInfoList){  
6.         this.mContext=mContext;  
7.         this.mGrdOneInfoList=mGrdOneInfoList;  
8.     }  
9.     @Override  
10.     public int getCount() {  
11.         // TODO Auto-generated method stub  
12.         return mGrdOneInfoList.size();  
13.     }  
14.   
15.     @Override  
16.     public Object getItem(int position) {  
17.         // TODO Auto-generated method stub  
18.         return position;  
19.     }  
20.   
21.     @Override  
22.     public long getItemId(int position) {  
23.         // TODO Auto-generated method stub  
24.         return position;  
25.     }  
26.   
27.     @Override  
28.     public View getView(int position, View convertView, ViewGroup parent) {  
29.         View view = convertView;  
30.         final ViewHolder holder;  
31.         if (convertView == null) {  
32.             view = ((Activity) mContext).getLayoutInflater().inflate(  
33.                     R.layout.item_grd1, parent, false);  
34.             holder = new ViewHolder();  
35.             holder.image = (ImageView) view.findViewById(R.id.grdimage);  
36.             holder.brife= (TextView) view.findViewById(R.id.brife1);  
37.             holder.price= (TextView) view.findViewById(R.id.price);  
38.             holder.marks= (TextView) view.findViewById(R.id.marks);  
39.             view.setTag(holder);  
40.         } else {  
41.             holder = (ViewHolder) view.getTag();  
42.         }  
43.         holder.image.setImageResource(mGrdOneInfoList.get(position).imagePath);  
44.         if(mGrdOneInfoList.get(position).brife.length()>50){  
45.             holder.brife.setText(mGrdOneInfoList.get(position).brife.subSequence(0, 30)+"...");  
46.         }else{  
47.             holder.brife.setText(mGrdOneInfoList.get(position).brife);  
48.         }  
49.         holder.price.setText(mGrdOneInfoList.get(position).price);  
50.         holder.marks.setText(mGrdOneInfoList.get(position).marksNum);  
51.         return view;  
52.     }  
53.   
54.     static class ViewHolder{  
55.         ImageView image;  
56.         TextView brife;  
57.         TextView price;  
58.         TextView marks;  
59.     }  
60. }  

资源地址为点击打开链接，今天到这里。