support Fragment 与滑动导航的组合
在做一个项目，有导航功能，但是不能滑动。调试了一天，用过ViewPager + PagerTabStrip,可惜做出来的效果文字是动态的，有点急躁不想去找调试的方法了。
换成FrameLayout + Fragment展示内容，用<RelativeLayout> 来做导航布局。
main_activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/head_bar" android:background="#FFF8DC" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_menu_back" android:layout_alignParentLeft="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="火灾损失统计" android:layout_centerInParent="true" /> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/navegation" android:layout_below="@id/head_bar" android:background="#DCDCDC" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:id="@+id/menu_bar_row" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_menu_today" android:clickable="true" android:id="@+id/tab_head" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:gravity="center_vertical|center_horizontal" android:text="表头" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_menu_compass" android:clickable="true" android:id="@+id/tab_body" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="主体" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_menu_copy" android:clickable="true" android:id="@+id/tab_print" /> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="打印" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_below="@id/menu_bar_row" android:paddingBottom="3dp" android:layout_gravity="bottom" > <ImageView android:layout_width="50dp" android:layout_height="2dp" android:id="@+id/img_indicateLine" android:src="#fff" android:gravity="center_horizontal" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/navegation" > <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/fragmentContainer" > </FrameLayout> </RelativeLayout> </RelativeLayout>
Main_Activity
package com.wfb.testfireloss; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.util.DisplayMetrics; import android.util.Log; import android.view.Menu; import android.view.View; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import com.wfb.bean.TabHead; import com.wfb.fragments.TabBodyFragment; import com.wfb.fragments.TabHeadFragment; import com.wfb.fragments.TabPrintFragment; public class MainActivity extends FragmentActivity { private static final String TAG = "MainActivity"; private TabHead tabHead = null; //保存表头信息的类 private final FragmentManager fragmentManager = getSupportFragmentManager(); private TabHeadFragment tabHeadFragment = null; private TabBodyFragment tabBodyFragment = null; private TabPrintFragment tabPrintFragment = null; private ImageView img_tabHead = null; private ImageView img_tabBody = null; private ImageView img_tabPrint = null; private ImageView img_bottomLine = null; private int currIndex = 0; private int bottomLineWidth; private int offset = 0; private int position_one; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); img_tabHead = (ImageView)findViewById(R.id.tab_head); img_tabBody = (ImageView)findViewById(R.id.tab_body); img_tabPrint = (ImageView)findViewById(R.id.tab_print); img_tabHead.setOnClickListener(new MenuClickListener(0)); img_tabBody.setOnClickListener(new MenuClickListener(1)); img_tabPrint.setOnClickListener(new MenuClickListener(2)); tabHeadFragment = new TabHeadFragment(); FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.add(R.id.fragmentContainer, tabHeadFragment); transaction.commit(); img_bottomLine = (ImageView)findViewById(R.id.img_indicateLine); bottomLineWidth = img_bottomLine.getLayoutParams().width; Log.i(TAG, "cursor imageview width=" + bottomLineWidth); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenW = dm.widthPixels; Log.i("MainActivity", "screenW=" + screenW); offset = (int)((screenW/3.0 - bottomLineWidth) / 2.0); Log.i("MainActivity", "offset=" + offset); position_one = (int)(screenW / 3.0); Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); img_bottomLine.setImageMatrix(matrix);// 设置动画初始位置 } class MenuClickListener implements View.OnClickListener{ private int index = 0; public MenuClickListener(int index){ this.index = index; } public void onClick(View v){ switch(index){ case 0: if(tabHeadFragment == null){ tabHeadFragment = new TabHeadFragment(); } FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.replace(R.id.fragmentContainer, tabHeadFragment); transaction.commit(); updateBottomLine(0); break; case 1: if(tabBodyFragment == null){ tabBodyFragment = new TabBodyFragment(); } FragmentTransaction transaction2 = fragmentManager.beginTransaction(); transaction2.replace(R.id.fragmentContainer, tabBodyFragment); transaction2.commit(); updateBottomLine(1); break; case 2: if(tabPrintFragment == null){ tabPrintFragment = new TabPrintFragment(); } FragmentTransaction transaction3 = fragmentManager.beginTransaction(); transaction3.replace(R.id.fragmentContainer, tabPrintFragment); transaction3.commit(); updateBottomLine(2); break; } } private void updateBottomLine(int clickedIndex){ Log.i(TAG,"source: " + (position_one*currIndex + offset) + " des: " + (position_one*clickedIndex + offset) ); Animation animation = new TranslateAnimation(position_one*currIndex + offset, position_one*clickedIndex + offset, 0, 0); currIndex = clickedIndex; animation.setFillAfter(true);// True:图片停在动画结束位置 animation.setDuration(300); img_bottomLine.startAnimation(animation); } } public TabHead getTabHeadInstance(){ if(this.tabHead == null) return (new TabHead()); return tabHead; } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; } }
定义Fragment ,像下面这样
package com.wfb.fragments; import com.wfb.testfireloss.R; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class TabBodyFragment extends Fragment{ private View tab_body_layout = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { tab_body_layout = inflater.inflate(R.layout.tab_body_layout, container,false); return tab_body_layout; } @Override public void onPause() { // TODO Auto-generated method stub super.onPause(); } }
今天这个调试感谢http://blog.csdn.net/wangjinyu501/article/details/8169924，其中的亮点是动画的新算法。
刚在大屏幕上测试发现下面的水平滚动条不对齐相应的文字，更新了代码好了，但是目前在初始运行的时候水平条不对齐，调试一下。
