Android-Nachahmungs-News-Top-Navigations-Label-Wechseleffekt

Vor kurzem habe ich aus persönlichen Interessen eine Demo geschrieben, die das Navigationsetikett oben in den Nachrichten imitiert. Einzelheiten finden Sie im Bild unten.

Im Allgemeinen werden wir dieses Wissen nutzen.

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

ok, dann geben Sie zuerst den ersten Schritt ein.

Um die obere Beschriftung zu implementieren, müssen wir HorizontalScrollView verwenden, da das ursprüngliche HorizontalScrollView-Steuerelement unsere Anforderungen nicht mehr erfüllen kann. Hier passen wir also eine HorizontalScrollView an

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); 
 } 
}

Müssen wir nach der Fertigstellung ein Fragment schreiben, um den Effekt im Bild anzuzeigen, hier passen wir eines zur einfachen Steuerung an

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

Okay, um die Steuerung zu erleichtern, schreiben wir einen Adapter

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; 
 } 
}

Nachdem dies abgeschlossen ist, ist es fast an der Zeit, mit dem Schreiben des Aktivitätscodes zu beginnen.

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); 
  } 
 }; 
  
  
}

activiivty_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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird, und ich hoffe auch, dass jeder ihn unterstützt Chinesische PHP-Website.

Weitere Artikel zum Wechseleffekt der Android-Imitationsnachrichten-Top-Navigationsbezeichnung finden Sie auf der chinesischen PHP-Website!