Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android仿新聞頂部導航標簽切換效果

Android仿新聞頂部導航標簽切換效果

編輯：關於Android編程

最近由於個人興趣原因,寫了個模仿新聞頂部導航標簽的demo。具體看下圖。


那麼大致上我們會用到這些知識。

1.Fragment
2.FragmentPagerAdapter
3.HorizontalScrollView
4.PopupWindow

ok,那麼首先進入第一步。

為了實現頂部的標簽,我們要用到HorizontalScrollView,因為原有的HorizontalScrollView控件已經不能滿足我們的使用了。所以這裡就自定義一個HorizontalScrollView

import android.app.Activity; 
import android.content.Context; 
import android.util.AttributeSet; 
import android.view.View; 
import android.widget.HorizontalScrollView; 
import android.widget.ImageView; 
 
/** 
 * 自定義垂直滑動View 
 * 
 */ 
 
public class ColumnHorizontalScrollView extends HorizontalScrollView { 
 //傳入的布局 
 private View ll_content; 
 //更多欄目的布局 
 private View ll_more; 
 //拖動欄布局 
 private View rl_colnmn; 
 //左陰影布局 
 private ImageView leftImage; 
 //右陰影布局 
 private ImageView rightImage; 
 //屏幕寬度 
 private int mScreenWidth =0; 
 //父類活動的activity 
 private Activity activity; 
 public ColumnHorizontalScrollView(Context context) { 
  super(context); 
 } 
 
 public ColumnHorizontalScrollView(Context context, AttributeSet attrs) { 
  super(context, attrs); 
 } 
 
 public ColumnHorizontalScrollView(Context context, AttributeSet attrs, 
          int defStyle) { 
  super(context, attrs, defStyle); 
 
 } 
 
 /** 
  * 拖動的時候執行的事件 
  * @param l 
  * @param t 
  * @param oldl 
  * @param oldt 
  */ 
 @Override 
 protected void onScrollChanged(int l, int t, int oldl, int oldt) { 
  super.onScrollChanged(l, t, oldl, oldt); 
  //先設置左右的陰影 
  shade_ShowOrHide(); 
  if(!activity.isFinishing() && ll_content != null && leftImage!= null && rightImage != null){ 
   if(ll_content.getWidth() <= mScreenWidth){ 
    leftImage.setVisibility(View.GONE); 
    rightImage.setVisibility(View.GONE); 
   } 
  }else { 
   return ; 
  } 
  if(l == 0){ 
   leftImage.setVisibility(View.GONE); 
   rightImage.setVisibility(View.VISIBLE); 
   return ; 
  } 
  if(ll_content.getWidth() - l + ll_more.getWidth() + rl_colnmn.getLeft() == mScreenWidth){ 
   leftImage.setVisibility(View.VISIBLE); 
   rightImage.setVisibility(View.GONE); 
   return ; 
  } 
  leftImage.setVisibility(View.VISIBLE); 
  rightImage.setVisibility(View.VISIBLE); 
 } 
 
 /** 
  * 傳入父類的資源文件等 
  * @param activity 
  * @param mScreenWidth 
  * @param paramView1 
  * @param paramView2 
  * @param paramView3 
  * @param paramView4 
  * @param paramView5 
  */ 
 public void setParam(Activity activity,int mScreenWidth,View paramView1,ImageView paramView2, ImageView paramView3 ,View paramView4,View paramView5) 
 { 
  this.activity = activity; 
  this.mScreenWidth = mScreenWidth; 
  ll_content = paramView1; 
  leftImage = paramView2; 
  rightImage = paramView3; 
  ll_more = paramView4; 
  rl_colnmn = paramView5; 
 } 
 /** 
  * 判斷左右陰影顯示隱藏效果 
  */ 
 public void shade_ShowOrHide(){ 
  if(!activity.isFinishing() && ll_content != null){ 
   measure(0,0); 
   //如果整體的寬度小於屏幕的寬度的話,那左右陰影都隱藏 
   if(mScreenWidth >= getMeasuredWidth()){ 
    leftImage.setVisibility(View.GONE); 
    rightImage.setVisibility(View.GONE); 
   } 
  }else { 
   return ; 
  } 
  //如果滑動到最左邊的時候,左邊陰影隱藏,右邊顯示 
  if(getLeft() == 0){ 
   leftImage.setVisibility(View.GONE); 
   rightImage.setVisibility(View.VISIBLE); 
   return ; 
  } 
  //如果滑動在最右邊的時候,左邊陰影顯示,右邊隱藏 
  if(getRight() == getMeasuredWidth() - mScreenWidth){ 
   leftImage.setVisibility(View.VISIBLE); 
   rightImage.setVisibility(View.GONE); 
   return ; 
  } 
  //否則,說明在中間位置,左右陰影都顯示 
  leftImage.setVisibility(View.VISIBLE); 
  rightImage.setVisibility(View.VISIBLE); 
 } 
}

完成之後，是不是需要編寫Fragment 了? 為了顯示圖中的效果,這裡我們就自定義一個,方便控制

import android.support.v4.app.Fragment; 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.util.Log; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.TextView; 
 
 
/** 
 * 自定義的Fragment類 
 */ 
 
public class NewsFragment extends Fragment { 
 String text; 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
  Bundle args = getArguments(); 
  text = args != null ? args.getString("text"):""; 
  super.onCreate(savedInstanceState); 
 } 
 
 @Nullable 
 @Override 
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
  View view = LayoutInflater.from(getActivity()).inflate(R.layout.news_fragment,null); 
  TextView item_textview = (TextView)view.findViewById(R.id.item_textview); 
  item_textview.setText(text); 
  return view; 
 
 } 
}

 news_fragment.xml

Ok,為了方便控制,我們來寫個適配器 

import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.app.FragmentTransaction; 
import android.view.ViewGroup; 
 
import java.util.ArrayList; 
 
/** 
 * 消息 Fragment 的適配器 
 */ 
 
public class NewsFragmentPagerAdapter extends FragmentPagerAdapter { 
 private ArrayList<Fragment> fragments;//定義一個集合管理所有的fragment 
 
 private FragmentManager fm;//fragment 管理器 
 
 public NewsFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments) { 
  super(fm); 
  this.fm = fm; 
  this.fragments = fragments; 
 } 
 @Override 
 public int getCount() { 
  return fragments.size(); 
 } 
 
 @Override 
 public android.support.v4.app.Fragment getItem(int position) { 
  return fragments.get(position); 
 } 
 
 @Override 
 public int getItemPosition(Object object) { 
  return POSITION_NONE; 
 } 
 
 //設置集合 
 public void setFragments(ArrayList<Fragment> fragments) { 
  if(this.fragments != null){ 
   FragmentTransaction ft = fm.beginTransaction(); 
   for(Fragment f : this.fragments){ 
    ft.remove(f); 
   } 
   ft.commit(); 
   ft = null; 
   fm.executePendingTransactions(); 
  } 
  this.fragments = fragments; 
  notifyDataSetChanged(); 
 } 
 
 @Override 
 public Object instantiateItem(ViewGroup container, int position) { 
  Object obj = super.instantiateItem(container, position); 
  return obj; 
 } 
}

完成這些,就差不多開始編寫Activity 的代碼了。

import android.os.Bundle; 
import android.os.Handler; 
import android.os.Message; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.view.ViewPager; 
import android.util.DisplayMetrics; 
import android.view.Gravity; 
import android.view.View; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 
 
import java.util.ArrayList; 
 
 
/** 
 */ 
 
public class MainActivity extends FragmentActivity { 
 /**自定義的HorizontalScrollView**/ 
 private ColumnHorizontalScrollView mColumnHorizontalScrollView; 
 
 private LinearLayout mRadioGroup_content; 
 
 private LinearLayout ll_more_columns; 
 
 private RelativeLayout rl_colum; 
 
 private ViewPager mViewPager; 
 
 private ImageView button_more_columns; 
 
 private String[] news = new String[] { 
  "1","2","3","4","5","6","7","8","9","10" 
 }; 
 //當前選中的欄目 
 private int colnmuSelectIndex = 0; 
 //左陰影部分 
 public ImageView shade_left; 
 //右陰影部分 
 public ImageView shade_right; 
 //屏幕寬度 
 private int mScreenWidth = 0; 
 
 //Item 的高度 
 private int mItemWidth = 0; 
 
 private ArrayList<Fragment> fragments = new ArrayList<>(); 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
 
  setContentView(R.layout.actiivty_top_news); 
  DisplayMetrics dm = new DisplayMetrics(); 
  getWindowManager().getDefaultDisplay().getMetrics(dm); 
  mScreenWidth = dm.widthPixels; 
  mItemWidth = mScreenWidth / 7;// 一個Item寬度為屏幕的1/7 
  intiViews(); 
 } 
 private final int SWITCH_PAGE = 0x00123; 
 
 private Handler mHandler = new Handler(){ 
  @Override 
  public void handleMessage(Message msg) { 
   super.handleMessage(msg); 
   switch (msg.what){ 
    case SWITCH_PAGE: 
     int selectIndex = msg.getData().getInt("selectIndex"); 
     for(int i = 0;i < mRadioGroup_content.getChildCount();i++){ 
      View localView = mRadioGroup_content.getChildAt(i); 
      if (i != selectIndex) 
       localView.setSelected(false); 
      else{ 
       localView.setSelected(true); 
       mViewPager.setCurrentItem(i); 
      } 
     } 
     break; 
   } 
  } 
 }; 
 /** 
  * 初始化組件 
  */ 
 protected void intiViews() { 
  mColumnHorizontalScrollView = (ColumnHorizontalScrollView)findViewById(R.id.mColumnHorizontalScrollView); 
  mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup_content); 
  ll_more_columns = (LinearLayout) findViewById(R.id.ll_more_columns); 
  rl_colum = (RelativeLayout) findViewById(R.id.rl_column); 
  button_more_columns = (ImageView) findViewById(R.id.button_more_columns); 
  mViewPager = (ViewPager) findViewById(R.id.mViewPager); 
  shade_left = (ImageView) findViewById(R.id.shade_left); 
  shade_right = (ImageView) findViewById(R.id.shade_right); 
  button_more_columns.setOnClickListener(new View.OnClickListener() { 
   @Override 
   public void onClick(View v) { 
    // TODO Auto-generated method stub 
   } 
  }); 
  setChangelView(); 
 } 
 /** 
  * 當欄目項發生變化時候調用 
  * */ 
 private void setChangelView() { 
  // initColumnData(); 
  initTabColumn(); 
  initFragment(); 
 } 
 /** 
  * 初始化Column欄目項 
  * */ 
 private void initTabColumn() { 
  //先刪除所有的控件 
  mRadioGroup_content.removeAllViews(); 
  //獲取所有的結合 
  int count = news.length; 
  //設置自定義的所有布局 
  mColumnHorizontalScrollView.setParam(this, mScreenWidth, mRadioGroup_content, shade_left, shade_right, ll_more_columns, rl_colum); 
  for(int i = 0; i< count; i++){ 
   LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mItemWidth , ViewPager.LayoutParams.WRAP_CONTENT); 
   params.leftMargin = 10; 
   params.rightMargin = 10; 
   TextView localTextView = new TextView(this); 
   localTextView.setTextAppearance(this, R.style.top_category_scroll_view_item_text); 
   localTextView.setBackgroundResource(R.drawable.radio_buttong_bg); 
   localTextView.setGravity(Gravity.CENTER); 
   localTextView.setPadding(5, 0, 5, 0); 
   localTextView.setId(i); 
   localTextView.setText(news[i]); 
   localTextView.setTextColor(getResources().getColorStateList(R.color.top_category_scroll_text_color_day)); 
   if(colnmuSelectIndex == i){ 
    localTextView.setSelected(true); 
   } 
   /** 
    * 設置點擊事件 
    */ 
   localTextView.setOnClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View v) { 
     for(int i = 0;i < mRadioGroup_content.getChildCount();i++){ 
      View localView = mRadioGroup_content.getChildAt(i); 
      if (localView != v) 
       localView.setSelected(false); 
      else{ 
       localView.setSelected(true); 
       mViewPager.setCurrentItem(i); 
      } 
     } 
    } 
   }); 
   mRadioGroup_content.addView(localTextView, i ,params); 
  } 
 } 
 /** 
  * 選擇的Column裡面的Tab 
  * */ 
 private void selectTab(int tab_postion) { 
  colnmuSelectIndex = tab_postion; 
  for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) { 
   View checkView = mRadioGroup_content.getChildAt(tab_postion); 
   int k = checkView.getMeasuredWidth(); 
   int l = checkView.getLeft(); 
   int i2 = l + k / 2 - mScreenWidth / 2; 
   mColumnHorizontalScrollView.smoothScrollTo(i2, 0); 
  } 
  //判斷是否選中 
  for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) { 
   View checkView = mRadioGroup_content.getChildAt(j); 
   boolean ischeck; 
   if (j == tab_postion) { 
    ischeck = true; 
   } else { 
    ischeck = false; 
   } 
   checkView.setSelected(ischeck); 
  } 
 } 
 /** 
  * 初始化Fragment 
  * */ 
 private void initFragment() { 
  int count = news.length; 
  for(int i = 0; i< count;i++){ 
   Bundle data = new Bundle(); 
   data.putString("text", news[i]); 
   NewsFragment newfragment = new NewsFragment(); 
   newfragment.setArguments(data); 
   fragments.add(newfragment); 
  } 
  NewsFragmentPagerAdapter mAdapetr = new NewsFragmentPagerAdapter(getSupportFragmentManager(), fragments); 
  mViewPager.setAdapter(mAdapetr); 
  mViewPager.setOnPageChangeListener(pageListener); 
 } 
 /** 
  * ViewPager切換監聽方法 
  * */ 
 public ViewPager.OnPageChangeListener pageListener= new ViewPager.OnPageChangeListener(){ 
 
  @Override 
  public void onPageScrollStateChanged(int arg0) { 
  } 
 
  @Override 
  public void onPageScrolled(int arg0, float arg1, int arg2) { 
  } 
 
  @Override 
  public void onPageSelected(int position) { 
   // TODO Auto-generated method stub 
   mViewPager.setCurrentItem(position); 
   selectTab(position); 
  } 
 }; 
 
 
}

actiivty_top_news.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical" > 
 
 
 <LinearLayout 
  android:layout_width="match_parent" 
  android:layout_height="40.0dip" 
  android:background="#fff3f3f3" 
  android:orientation="horizontal" > 
 
  <RelativeLayout 
   android:id="@+id/rl_column" 
   android:layout_width="match_parent" 
   android:layout_height="40.0dip" 
   android:layout_weight="1.0" > 
 
   <cn.com.topnews.ui.ColumnHorizontalScrollView 
    android:id="@+id/mColumnHorizontalScrollView" 
    android:layout_width="match_parent" 
    android:layout_height="40.0dip" 
    android:scrollbars="none" > 
 
    <LinearLayout 
     android:id="@+id/mRadioGroup_content" 
     android:layout_width="fill_parent" 
     android:layout_height="40.0dip" 
     android:layout_centerVertical="true" 
     android:gravity="center_vertical" 
     android:orientation="horizontal" 
     android:paddingLeft="10.0dip" 
     android:paddingRight="10.0dip" /> 
   </cn.com.topnews.ui.ColumnHorizontalScrollView> 
 
   <ImageView 
    android:id="@+id/shade_left" 
    android:layout_width="10.0dip" 
    android:layout_height="40.0dip" 
    android:layout_alignParentLeft="true" 
    android:layout_centerVertical="true" 
    android:background="@drawable/channel_leftblock" 
    android:visibility="gone" /> 
 
   <ImageView 
    android:id="@+id/shade_right" 
    android:layout_width="10.0dip" 
    android:layout_height="40.0dip" 
    android:layout_alignParentRight="true" 
    android:layout_centerVertical="true" 
    android:background="@drawable/channel_rightblock" 
    android:visibility="visible" /> 
  </RelativeLayout> 
 
  <LinearLayout 
   android:id="@+id/ll_more_columns" 
   android:layout_width="wrap_content" 
   android:layout_height="40.0dip" > 
 
   <ImageView 
    android:id="@+id/button_more_columns" 
    android:layout_width="40.0dip" 
    android:layout_height="40.0dip" 
    android:layout_gravity="center_vertical" 
    android:src="@drawable/channel_glide_day_bg" /> 
  </LinearLayout> 
 </LinearLayout> 
 
 <View 
  android:id="@+id/category_line" 
  android:layout_width="fill_parent" 
  android:layout_height="0.5dip" 
  android:background="#ffdddddd" /> 
 
 <android.support.v4.view.ViewPager 
  android:id="@+id/mViewPager" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" /> 
 
</LinearLayout>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持本站。

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android用HandlerThread模擬AsyncTask功能(ThreadTask) CPU概念和調度算法 android動作傳感器 調試 Android* x86 應用程序的方法以及要使用的工具 Handler、Looper消息傳遞機制 Android自定義button點擊效果的兩種方式
Android底部導航欄—RadioButton+Fragment

簡單拓展RadioButton控件使用如果不看這些，就直接下托Radio
安卓開發的環境變量配置

無論是ADT還是Android Studio 開發工具都需要下載JDK.
Android之視頻播放以及亮度音量變換

程序實現功能：播放視頻，右側上下滑動改變亮度，左側上下滑動改變音量。現在
Android菜鳥的成長筆記（27）——SurfaceView的使用

前面有關自定義View中進行了繪圖，但View的繪圖機制存在如下缺陷：1
閱讀排行版
Copyright © Android教程網 All Rights Reserved