Android学习笔记（九）视图的应用布局效果

　　最近少了写博客，可能最近忙吧，工作上忙，因为工作原因也忙于学习，也没记录什么了，也没有按照之前的计划去学习了。现在就记录一下最近学到的。

　　要做Android应用，界面设计少不了，可惜之前一直在用WindowPhone的，对别的系统的界面风格严重不了解，稍留意了一下，发现有几种风格的，上网找了代码学习了一下，还是能做出来的

豌豆荚的布局

　　这种布局类似用Tab来布局，通过左右滑动切换不同的界面，或者点击顶部的文字来切换。不过在这里我并没有用上TabHost，对整个页面来说我把它切成了3部分:文字导航、绿色的那小条子，还有下面主要的内容

最上面的文字导航我就用一个线性布局把TextView排列起来
绿色的小条子也是用了一个线性布局里面放了一个ImageView，这个ImageView是需要加动画的
主要内容我就用了ViewPager，这是一个好东西，滑动切换时有效果，这里是用到了碎片Fragment，虽然说是Android3.0后才加上去的东西，但是2.3的系统还是能用得上。

然后用一个线性布局把上面这三块排列起来就行了

下面就展示一下布局的代码

 <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:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:orientation="vertical" >

         <LinearLayout

             android:id="@+id/imf_linearLayout1"

             android:layout_width="fill_parent"

             android:layout_height="wrap_content"

             android:paddingBottom="5dip"

             android:paddingTop="10dip" >

             <TextView

                 android:id="@+id/imfLbRealTime"

                 android:layout_width="fill_parent"

                 android:layout_height="fill_parent"

                 android:layout_weight="1.0"

                 android:gravity="center"

                 android:text="Tab1"

                 android:textColor="@color/select"/>

             <TextView

                 android:id="@+id/imfLbOnLine"

                 android:layout_width="fill_parent"

                 android:layout_height="fill_parent"

                 android:layout_weight="1.0"

                 android:gravity="center"

                 android:text="Tab2"

                 android:textColor="@color/unselect"/>

         </LinearLayout>

         <LinearLayout

             android:layout_width="match_parent"

             android:layout_height="2dip"

             android:layout_gravity="bottom"

             android:orientation="vertical"

             android:paddingBottom="3dip"

             android:background="#ddd">

             <ImageView

                 android:id="@+id/imfImgButtomLine"

                 android:layout_width="40dip"

                 android:layout_height="2dip"

                 android:scaleType="matrix"

                 android:src="@color/select" />

         </LinearLayout>

     </LinearLayout>

     <android.support.v4.view.ViewPager

         android:id="@+id/imfVpContent"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_gravity="center"

         android:layout_weight="1.0"

         android:flipInterval="30"

         android:persistentDrawingCache="animation" />

 </LinearLayout>

这里为了兼容，ViewPager也是用了support.v4里面的视图，导航的条子的宽度这里是乱设的，因为它到时的宽度会在java代码中进行设置。还有颜色呢只是在color.xml里面定义的颜色而已

Java文件就不打算完全贴出来，因为这个可以用在碎片里面，也可以用在活动里面，我就用在了碎片里面。

在构造碎片的方法里面或者构造视图的方法里面，依次调用下面定义的方法

     private void IniWidth()

     {

         DisplayMetrics dm=new DisplayMetrics();

         getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);

         int screenW = dm.widthPixels;

         buttomLine=(ImageView)view.findViewById(R.id.domfImgButtomLine);

         buttomLine.getLayoutParams().width=screenW/5;

         buttomLine.setLayoutParams(buttomLine.getLayoutParams());

         buttomLineWidth=buttomLine.getLayoutParams().width;

         offset = (int) ((screenW / 5.0 - buttomLineWidth) / 2);

         positionOne = (int) (screenW / 5.0);

         positionTwo = positionOne * 2;

         positionThree=positionOne * 3;

         positionFour=positionOne * 4;

     }

这个方法先获取获取当前屏幕的宽度，再通过宽度对小条的吃长度进行设置，最后用到的几个position是后面在给小条动画效果时用到的值，它们都是int类型，记录着每个导航标题的位置。

     private void IniViews()

     {

         lbCheck=(TextView)view.findViewById(R.id.domfLbCheck);

         lbPublish=(TextView)view.findViewById(R.id.domfLbPublish);

         lbQuery=(TextView)view.findViewById(R.id.domfLbQuery);

         lbRecommand=(TextView)view.findViewById(R.id.domfLbRecommand);

         lbSend=(TextView)view.findViewById(R.id.domfLbSend);

         lbQuery.setOnClickListener(new MyOnClickListener(0));

         lbCheck.setOnClickListener(new MyOnClickListener(1));

         lbPublish.setOnClickListener(new MyOnClickListener(2));

         lbSend.setOnClickListener(new MyOnClickListener(3));

         lbRecommand.setOnClickListener(new MyOnClickListener(4));

     }

视图设置，给相应的导航标题对象添加引用，以及绑定事件，绑定事件目的在于点击文字时会切换到相应的页面中去，事件的定义如下

     class MyOnClickListener implements View.OnClickListener {

         private int index = 0;

         public MyOnClickListener(int i) {

             index = i;

         }

         @Override

         public void onClick(View v) {

             mPager.setCurrentItem(index);

         }

 };

最后设置ViewPager了

     private void IniViewPager()

     {

         mPager=(ViewPager)view.findViewById(R.id.domfVpContent);

         ArrayList<Fragment> fragLst=new ArrayList<Fragment>();

         checkFrag =new DataOptionCheckFragment();

         publishFrag =new DataOptionPublishFragment();

         queryFrag =new DataOptionQueryFragment();

         recommandFrag =new DataOptionRecommandFragment();

         sendFrag =new DataOptionSendFragment();

         fragLst.add(queryFrag);

         fragLst.add(checkFrag);

         fragLst.add(publishFrag);

         fragLst.add(sendFrag);

         fragLst.add(recommandFrag);

         adapter=new MyViewPageAdapter(getActivity().getSupportFragmentManager(),fragLst);

         mPager.setAdapter(adapter);

         mPager.setCurrentItem(0);

         mPager.setOnPageChangeListener(new MyOnPageChangeListener());

         mPager.setCurrentItem(0);

     }

这里主要是设置构造相应的碎片，然后添加到相应的adapter里面，加入到ViewPager里面，重点在于PageChange事件的定义

     class MyOnPageChangeListener implements OnPageChangeListener {

         @Override

         public void onPageScrollStateChanged(int arg0) {

             // TODO Auto-generated method stub

         }

         @Override

         public void onPageScrolled(int arg0, float arg1, int arg2) {

             // TODO Auto-generated method stub

         }

         @Override

         public void onPageSelected(int selectedIndex) {

             Animation animation=null;

             if(selectedIndex==currIndex)

             {

             }

             switch (selectedIndex) {

             case 0:

                 if (currIndex == 1) {

                     animation = new TranslateAnimation(positionOne, 0, 0, 0);

                     lbCheck.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 2) {

                     animation = new TranslateAnimation(positionTwo, 0, 0, 0);

                     lbPublish.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 3) {

                     animation = new TranslateAnimation(positionThree, 0, 0, 0);

                     lbSend.setTextColor(resources.getColor(R.color.unselect));

                 }else if (currIndex == 4) {

                     animation = new TranslateAnimation(positionFour, 0, 0, 0);

                     lbRecommand.setTextColor(resources.getColor(R.color.unselect));

                 } else if(selectedIndex==currIndex){

                     animation=new TranslateAnimation(0, 0, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 }

                 lbQuery.setTextColor(resources.getColor(R.color.select));

                 break;

             case 1:

                 if (currIndex == 0) {

                     animation = new TranslateAnimation(offset, positionOne, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 2) {

                     animation = new TranslateAnimation(positionTwo, positionOne, 0, 0);

                     lbPublish.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 3) {

                     animation = new TranslateAnimation(positionThree, positionOne, 0, 0);

                     lbSend.setTextColor(resources.getColor(R.color.unselect));

                 }else if (currIndex == 4) {

                     animation = new TranslateAnimation(positionFour, positionOne, 0, 0);

                     lbRecommand.setTextColor(resources.getColor(R.color.unselect));

                 }else if(selectedIndex==currIndex){

                     animation=new TranslateAnimation(0, positionOne, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 }

                 lbCheck.setTextColor(resources.getColor(R.color.select));

                 break;

             case 2:

                 if (currIndex == 0) {

                     animation = new TranslateAnimation(offset, positionTwo, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 1) {

                     animation = new TranslateAnimation(positionOne, positionTwo, 0, 0);

                     lbCheck.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 3) {

                     animation = new TranslateAnimation(positionThree, positionTwo, 0, 0);

                     lbSend.setTextColor(resources.getColor(R.color.unselect));

                 }else if (currIndex == 4) {

                     animation = new TranslateAnimation(positionFour, positionTwo, 0, 0);

                     lbRecommand.setTextColor(resources.getColor(R.color.unselect));

                 }else if(selectedIndex==currIndex){

                     animation=new TranslateAnimation(0, positionTwo, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 }

                 lbPublish.setTextColor(resources.getColor(R.color.select));

                 break;

             case 3:

                 if (currIndex == 0) {

                     animation = new TranslateAnimation(offset, positionThree, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 1) {

                     animation = new TranslateAnimation(positionOne, positionThree, 0, 0);

                     lbCheck.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 2) {

                     animation = new TranslateAnimation(positionTwo, positionThree, 0, 0);

                     lbPublish.setTextColor(resources.getColor(R.color.unselect));

                 }else if (currIndex == 4) {

                     animation = new TranslateAnimation(positionFour, positionThree, 0, 0);

                     lbRecommand.setTextColor(resources.getColor(R.color.unselect));

                 }else if(selectedIndex==currIndex){

                     animation=new TranslateAnimation(0, positionThree, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 }

                 lbSend.setTextColor(resources.getColor(R.color.select));

                 break;

             case 4:

                 if (currIndex == 0) {

                     animation = new TranslateAnimation(offset, positionFour, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 1) {

                     animation = new TranslateAnimation(positionOne, positionFour, 0, 0);

                     lbCheck.setTextColor(resources.getColor(R.color.unselect));

                 } else if (currIndex == 2) {

                     animation = new TranslateAnimation(positionTwo, positionFour, 0, 0);

                     lbPublish.setTextColor(resources.getColor(R.color.unselect));

                 }else if (currIndex == 3) {

                     animation = new TranslateAnimation(positionThree, positionFour, 0, 0);

                     lbSend.setTextColor(resources.getColor(R.color.unselect));

                 }else if(selectedIndex==currIndex){

                     animation=new TranslateAnimation(0, positionFour, 0, 0);

                     lbQuery.setTextColor(resources.getColor(R.color.unselect));

                 }

                 lbRecommand.setTextColor(resources.getColor(R.color.select));

                 break;

             }

             currIndex=selectedIndex;

             animation.setFillAfter(true);

             animation.setDuration(300);

             buttomLine.startAnimation(animation);

         }

     }

这里根据之前选中的标题是哪个，确定要把小滑块从原本位置移动到新位置上，把原本选中颜色的文字变回不选中，把新选中文字的颜色更替。

设置ViewPager时还涉及到一个adapter的定义，代码如下

 public class MyViewPageAdapter extends FragmentPagerAdapter {

     private ArrayList<Fragment> arrayList;

     public MyViewPageAdapter(FragmentManager fm) {

         super(fm);

         // TODO Auto-generated constructor stub

     }

     public MyViewPageAdapter(FragmentManager fm,ArrayList<Fragment> arrayList)

     {

         super(fm);

         this.arrayList=arrayList;

     }

     @Override

     public Fragment getItem(int position) {

         // TODO Auto-generated method stub

         return arrayList.get(position);

     }

     @Override

     public int getCount() {

         // TODO Auto-generated method stub

         return arrayList.size();

     }

     @Override

     public int getItemPosition(Object object) {

         return POSITION_NONE;

     }

 }

有个争议的地方，就是对public Object instantiateItem (ViewGroup container, int position)方法的重写，在网上看对这个方法重写后，多次切换ViewPager之后内容就会被清空掉，但是我重写了之后内容才不会被清空，有次还尝试了无论有没有重写照样被清空。

底部Tab导航

这个用的是TabHost了，个人认为主要的是TabHost和TabWidget，而主要还是靠TabWidget这部分把Tab的效果呈现出来，而页面的内容最终还是靠碎片来实现，这里可以用FrameLayout显示一个碎片，也可以通过ViewPager显示，布局文件如下

<?xml version="1.0" encoding="utf-8"?>

<TabHost

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/tabhost"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <LinearLayout

        android:orientation="vertical"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/tabEnableLayout">

        <FrameLayout

            android:id="@+id/realtabcontent"

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"/>  

        <TabWidget

            android:id="@android:id/tabs"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:tabStripEnabled="false"

            android:background="#04508b"

            android:layout_weight="0"/>

    </ LinearLayout >

</TabHost>

然后java文件构造的方法中按顺序调用下面定义的方法

     //设置tab选项的内容

     private void SetViews()

     {

         fm=this.getActivity().getSupportFragmentManager();

         tabHost=(TabHost)contentView. findViewById(android.R.id.tabhost);

         tabWidget=(TabWidget)contentView. findViewById(android.R.id.tabs);

         LinearLayout layout=(LinearLayout)tabHost.getChildAt(0);

         TabWidget tw=(TabWidget)layout.getChildAt(1);

         relative1=(RelativeLayout)LayoutInflater.from(this.getActivity()).inflate(R.layout.tab_indicator_item, tw, false);

         ((ImageView)relative1.getChildAt(0)).setBackgroundResource(R.drawable.selector_tab_home);

         ((TextView)relative1.getChildAt(1)).setText("首页");

         relative2=(RelativeLayout)LayoutInflater.from(this.getActivity()).inflate(R.layout.tab_indicator_item, tw, false);

         ((ImageView)relative2.getChildAt(0)).setBackgroundResource(R.drawable.selector_tab_data);

         ((TextView)relative2.getChildAt(1)).setText("数据");

         relative3=(RelativeLayout)LayoutInflater.from(this.getActivity()).inflate(R.layout.tab_indicator_item, tw, false);

         ((ImageView)relative3.getChildAt(0)).setBackgroundResource(R.drawable.selector_tab_room);

         ((TextView)relative3.getChildAt(1)).setText("站房");

         relative4=(RelativeLayout)LayoutInflater.from(this.getActivity()).inflate(R.layout.tab_indicator_item, tw, false);

         ((ImageView)relative4.getChildAt(0)).setBackgroundResource(R.drawable.selector_tab_more);

         ((TextView)relative4.getChildAt(1)).setText("更多");

         indexFragment=new IndexFragment();

         dataOptionFragment=new DataOptionFragment();

         roomEnvFragment =new RoomEnvFragment();

         moreFragment=new MoreFragment();

     }

这里主要是获取了TabWidget，然后把逐个标签设置进去，标签的内容也是通过布局文件来设置。

 private void SetTabHost()

     {

         tabHost.setup();

         TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener(){

             @Override

             public void onTabChanged(String arg0) {

                 catch(Exception ex)

                 {}

                 if(arg0.equalsIgnoreCase("Home")){

                     ChangeFragment(indexFragment);

                     SELECT_TAB=1;

                 }

                 else if(arg0.equalsIgnoreCase("Data")){

                     ChangeFragment(dataOptionFragment);

                     SELECT_TAB=2;

                 }

                 else if(arg0.equalsIgnoreCase("Room")){

                     ChangeFragment(roomEnvFragment);

                     SELECT_TAB=3;

                 }

                 else if(arg0.equalsIgnoreCase("More")){

                     ChangeFragment(moreFragment);

                     SELECT_TAB=4;

                 }

                 else

                 {

                     switch (SELECT_TAB) {

                     default:

                     case 1:

                         ChangeFragment(indexFragment);

                         break;

                     case 2:

                         ChangeFragment(dataOptionFragment);

                         break;

                     case 3:

                         ChangeFragment(roomEnvFragment);

                         break;

                     case 4:

                         ChangeFragment(moreFragment);

                         break;

                     }

                 }

             }

         };

         tabHost.setCurrentTab(0);

         tabHost.setOnTabChangedListener(tabChangeListener);

         IniTab();

         tabHost.setCurrentTab(0);

     }

这里大部分代码都是定义Tab切换的事件，因为在Android中的TabHost跟之前在WinFor中的TabControl那样，标签切换了，内容跟着切换。切换时调用了一个方法，处理碎片的切换

     private void ChangeFragment(Fragment frag)

     {

         ft= fm.beginTransaction();

         ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);

         ft.replace(R.id.realtabcontent, frag);

         ft.commit();

     }

还有另一个方法是真的把Tab添加都TabHost里面去了

     //增添Tab的内容

     private void IniTab()

     {

         TabSpec tSpecHome=tabHost.newTabSpec("Home");

         TabSpec tSpecData=tabHost.newTabSpec("Data");

         TabSpec tSpecRoom=tabHost.newTabSpec("Room");

         TabSpec tSpecMore=tabHost.newTabSpec("More");

         tSpecHome.setIndicator(relative1);

         tSpecHome.setContent(new MyTabContent(this.getActivity().getBaseContext()));

         tSpecData.setIndicator(relative2);

         tSpecData.setContent(new MyTabContent(this.getActivity().getBaseContext()));

         tSpecRoom.setIndicator(relative3);

         tSpecRoom.setContent(new MyTabContent(this.getActivity().getBaseContext()));

         tSpecMore.setIndicator(relative4);

         tSpecMore.setContent(new MyTabContent(this.getActivity().getBaseContext()));

         tabHost.addTab(tSpecHome);

         tabHost.addTab(tSpecData);

         tabHost.addTab(tSpecRoom);

         tabHost.addTab(tSpecMore);

     }

侧栏菜单

这个感觉比较简单，但是效果没那么好，主要用到的是FrameLayout布局（或者RelativeLayout布局）和ListView，因为FrameLayout只能让内容显示在左上角（RelativeLayout默认也是把内容显示在左上角），所以把ListView设置在FrameLayout（或RelativeLayout）最下面就可以了。

 <RelativeLayout

     xmlns:android="http://schemas.android.com/apk/res/android"

     android:layout_width="fill_parent"

     android:layout_height="fill_parent"

     >

      <RelativeLayout

            android:id="@+id/divTitle"

             android:layout_width="fill_parent"

             android:layout_height="45dp"

             android:orientation="horizontal"

             android:background="#007ACC"

             >

             <TextView

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:textSize="22dp"

                 android:layout_centerInParent="true"

                 android:textColor="@android:color/white"

                 android:text="@string/app_name"

                 />

                 <Button

                     android:layout_width="wrap_content"

                     android:layout_height="wrap_content"

                     android:layout_alignParentRight="true"

                     android:layout_centerVertical="true"

                     android:text="刷新"

                     android:id="@+id/titleBtnRefresh"

                     />

         </RelativeLayout>

     <fragment

         android:id="@+id/titles"

         android:layout_width="wrap_content"

         android:layout_height="match_parent"

         android:layout_weight="1"

         class="com.sysu.cityenv.androidapp.Fragments.TabHostFragment"/>

     </LinearLayout>

      <ListView

         android:id="@+id/left_menu"

         android:layout_height="fill_parent"

         android:layout_width="120dp"

         android:background="#F0F0F0"/>   

 </RelativeLayout>

ListView设置的代码就不列举了，拉出侧栏的代码是通过触控事件来实现的，在点击下去的时候记录开始位置，到提起来的时候就判断移动的方向，从而把ListView设置成显示和隐藏

     @Override

     public boolean onTouchEvent(MotionEvent event)

     {

         float xDelta=(float) Math.abs(mPostion-event.getX());

         if(event.getAction()==MotionEvent.ACTION_DOWN){

             mPostion= event.getX();

             mPositionY=event.getY();

         }

         if(event.getAction()==MotionEvent.ACTION_UP&&xDelta>70)

         {

             if(xDelta>Math.abs(mPositionY-event.getY())){

                 boolean isVisiable=leftMenu.getVisibility()==View.VISIBLE;

                 if(mPostion>event.getX()&&isVisiable)     Hide();

                 else if(mPostion<event.getX()&&mPostion<=sWidth*0.1)    Show();

             }

         }

         return super.onTouchEvent(event);

     }

不过侧栏滑出来了，后面的内容还是会有事件响应的，就算在这里把返回值设成false也没用（true表明在事件冒泡中还需要处理，false则表示不需要处理了），因为在整个事件冒泡过程中，这个OnTouch的时间在最后才触发，那只能把后面视图作处理，让它的返回是false，我的处理是这样子的，把ListView下面的内容放在一个Layout的布局中去，那个Layout是自己拓展某个Layout视图，重写它的onInterceptTouchEvent方法，让它在适当的时候返回false，不对触控有响应，那么点击事件也没响应了，因为Click事件是包在了两个Touch事件里面的（DOWN和UP）。

     @Override

     public boolean onTouchEvent(MotionEvent event)

     {

         float xDelta=(float) Math.abs(mPostion-event.getX());

         if(event.getAction()==MotionEvent.ACTION_DOWN){

             mPostion= event.getX();

             mPositionY=event.getY();

             if(mPostion<=sWidth*0.1)

                 ((MyLinearLayout)findViewById(R.id.tabEnableLayout)).SetControlEnable(false);

         }

         if(event.getAction()==MotionEvent.ACTION_UP&&xDelta>70)

         {

             if(xDelta>Math.abs(mPositionY-event.getY())){

                 boolean isVisiable=leftMenu.getVisibility()==View.VISIBLE;

                 if(mPostion>event.getX()&&isVisiable)     Hide();

                 else if(mPostion<event.getX()&&mPostion<=sWidth*0.1)    Show();

             }

         }

         else if(event.getAction()==MotionEvent.ACTION_UP&&mPostion<=sWidth*0.1)

         {

             ((MyLinearLayout)findViewById(R.id.tabEnableLayout)).SetControlEnable(true);

         }

         return super.onTouchEvent(event);

     }

代码就成这样子，但是这样有个弊端是，滑动的距离太小的时候，侧栏没显示出来，但是侧栏下面的内容已经停止了事件响应，暂时没好办法去处理。

巴特西

Android学习笔记（九）视图的应用布局效果

豌豆荚的布局

底部Tab导航

侧栏菜单

最新文章

热门文章

巴特西

Android学习笔记（九） 视图的应用布局效果

豌豆荚的布局

底部Tab导航

侧栏菜单

最新文章

热门文章

Android学习笔记（九）视图的应用布局效果