ViewPager 상단 탐색 표시 줄 연동 효과(제목 표시 줄 항목 이 많 음)

제목 표시 줄 이 너무 많 고 화면의 폭 을 초과 하면 어떻게 해 야 하 는 지 다음 과 같이 해결 하 겠 습 니 다.효 과 는 다음 과 같 습 니 다.

사실은 전에 쓴 것 과 차이 가 많 지 않 습 니 다.저 는 어느 demo 에 추가 하고 수정 을 했 습 니 다.몇 개의 title 제목 을 추가 하고 몇 개의 그림 을 추 가 했 습 니 다.가장 중요 한 것 은 TableLayout 에 속성 을 추가 하 는 것 입 니 다.

app:tabMode="scrollable"

이 속성 은 TableLayout 를 설정 하여 스크롤 할 수 있 습 니 다.위 에 있 는 제목 표시 줄 을 스크롤 하 는 것 을 보 세 요.

여기 서 나 는 제목 표시 줄 에 몇 개의 추가 속성 을 설정 하여 더욱 보기 좋게 만 들 었 다.

<span style="white-space:pre"> 
</span>app:tabTextColor="#f5eef5" 
app:tabSelectedTextColor="#ec4213" 
app:tabIndicatorColor="#aaff00"
</pre><pre name="code" class="html">app:tabTextColor="#f5eef5" //            
app:tabSelectedTextColor="#ec4213" 
</span>//              
app:tabIndicatorColor="#aaff00" 
</span>//                  
</pre><span style="font-size:14px">         ：
</span><p></p><p></p><pre name="code" class="html">
<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
xmlns:app="http://schemas.android.com/apk/res-auto"> 
<!--app:tabIndicatorHeight="20dp"      --> 
<android.support.design.widget.TabLayout 
android:id="@+id/main_tab" 
android:layout_width="match_parent" 
android:layout_height="50dp" 
app:tabMode="scrollable" 
app:tabTextColor="#f5eef5" 
app:tabSelectedTextColor="#ec4213" 
app:tabIndicatorColor="#aaff00" 
/> 
<android.support.v4.view.ViewPager 
android:id="@+id/main_viewpager" 
android:layout_width="match_parent" 
android:layout_below="@+id/main_tab" 
android:layout_height="match_parent"/> 
</RelativeLayout>

Avtivity 에 서 는 이전에 쓴 TableLayout 의 mode 를 주석 으로 달 았 습 니 다.

// //  tab    
// mTab.setTabMode(TabLayout.MODE_FIXED);     tab 
//app:tabMode="scrollable"     tab

그리고 다른 그림 과 제목 을 추가 합 니 다.모든 코드 는:

package com.duanlian.tablayoutdemo; 
import android.support.design.widget.TabLayout; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.Window; 
import android.widget.ImageView; 
import com.duanlian.tablayoutdemo.adapter.MyViewPagerAdapter; 
import java.util.ArrayList; 
import java.util.List; 
public class MainActivity extends AppCompatActivity { 
private ViewPager mViewPager; 
private TabLayout mTab; 
private MyViewPagerAdapter mAdapter; 
private List<ImageView> mList; 
private List<String> titleList; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main); 
initView(); 
} 
/** 
*       
*/ 
private void initView() { 
mViewPager = (ViewPager) findViewById(R.id.main_viewpager); 
//  ViewPager          
mList = new ArrayList<>(); 
ImageView yuanYuan = new ImageView(this); 
ImageView yiYan = new ImageView(this); 
ImageView liYa = new ImageView(this); 
ImageView yixuan = new ImageView(this); 
ImageView yifei = new ImageView(this); 
ImageView zhuxian = new ImageView(this); 
ImageView tianai = new ImageView(this); 
yuanYuan.setImageResource(R.mipmap.gaoyuanyuan); 
yiYan.setImageResource(R.mipmap.jiangyiyan); 
liYa.setImageResource(R.mipmap.tongliya); 
yixuan.setImageResource(R.mipmap.anyixuan); 
yifei.setImageResource(R.mipmap.liuyifei); 
zhuxian.setImageResource(R.mipmap.wangzhuxian); 
tianai.setImageResource(R.mipmap.zhangtianai); 
//         
yuanYuan.setScaleType(ImageView.ScaleType.FIT_XY); 
yiYan.setScaleType(ImageView.ScaleType.FIT_XY); 
liYa.setScaleType(ImageView.ScaleType.FIT_XY); 
yixuan.setScaleType(ImageView.ScaleType.FIT_XY); 
yifei.setScaleType(ImageView.ScaleType.FIT_XY); 
zhuxian.setScaleType(ImageView.ScaleType.FIT_XY); 
tianai.setScaleType(ImageView.ScaleType.FIT_XY); 
mList.add(yuanYuan); 
mList.add(yiYan); 
mList.add(liYa); 
mList.add(yixuan); 
mList.add(yifei); 
mList.add(zhuxian); 
mList.add(tianai); 
//     
titleList = new ArrayList<>(); 
titleList.add("   "); 
titleList.add("   "); 
titleList.add("   "); 
titleList.add("   "); 
titleList.add("   "); 
titleList.add("   "); 
titleList.add("   "); 
mTab = (TabLayout) findViewById(R.id.main_tab); 
// //  tab    
// mTab.setTabMode(TabLayout.MODE_FIXED);     tab 
//app:tabMode="scrollable"     tab 
//  tab    
for (int i = 0; i < titleList.size(); i++) { 
mTab.addTab(mTab.newTab().setText(titleList.get(i))); 
} 
// TabLayout ViewPager     
mTab.setupWithViewPager(mViewPager); 
//   adapter 
mAdapter = new MyViewPagerAdapter(mList,titleList); 
// ViewPager  Adapter 
mViewPager.setAdapter(mAdapter); 
} 
}

Adapter 에 서 는 아무것도 변 하지 않 았 습 니 다.여전히:

package com.duanlian.tablayoutdemo.adapter; 
import android.support.v4.view.PagerAdapter; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageView; 
import java.util.List; 
public class MyViewPagerAdapter extends PagerAdapter { 
private List<ImageView> list; 
private List<String> titleList; 
public MyViewPagerAdapter(List<ImageView> mList,List<String> titleList) { 
this.list = mList; 
this.titleList = titleList; 
} 
@Override 
public int getCount() { 
return list.size(); 
} 
@Override 
public boolean isViewFromObject(View view, Object object) { 
return view==object; 
} 
@Override 
public Object instantiateItem(ViewGroup container, int position) { 
container.addView(list.get(position));//     
return list.get(position); 
} 
@Override 
public void destroyItem(ViewGroup container, int position, Object object) { 
container.removeView(list.get(position));//     
} 
@Override 
public CharSequence getPageTitle(int position) { 
return titleList.get(position);//     
} 
}

위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 ViewPager 상단 네 비게 이 션 바 연동 효과(제목 표시 줄 항목 이 많 음)입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!