1,项目中需要添加的多个标题超出了屏幕的可见范围,使用 HorizontalScrollView 实现
在标题的下面是一个viewpager ,想要的效果是滑动viewpager的时候可以滑动上面的标题,滑动到的标题必须是可见的,
2,在网上找了一下资料,都没有找到合适使用的,无奈只能一个个参数打Log ,查看了一下API文档,自己计算了一下,初步实现了功能,
不说了 直接上代码吧,
xml文件
<?xml version="1.0" encoding="utf-8"?> <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" tools:context=".ui.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:clickable="true" android:src="@drawable/icon_topbar_headpic_read" /> <HorizontalScrollView android:id="@+id/hs_main" android:layout_width="0dp" android:layout_height="@dimen/activity_main_title_height" android:layout_weight="1" android:scrollbars="none"> <LinearLayout android:id="@+id/ll_title" android:layout_width="wrap_content" android:layout_height="@dimen/activity_main_title_height" android:orientation="horizontal"> <TextView android:id="@+id/tv_activity_main_title_timeline" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/daily_timeline" /> <TextView android:id="@+id/tv_activity_main_title_bagua" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_bagua" /> <TextView android:id="@+id/tv_activity_main_title_qipa" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_qipa" /> <TextView android:id="@+id/tv_activity_main_title_video_news" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_video_news" /> <TextView android:id="@+id/tv_activity_main_title_tech" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_tech" /> <TextView android:id="@+id/tv_activity_main_title_car" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_car" /> <TextView android:id="@+id/tv_activity_main_title_sports" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_sports" /> <TextView android:id="@+id/tv_activity_main_title_finance" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_finance" /> <TextView android:id="@+id/tv_activity_main_title_mil" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_mil" /> <TextView android:id="@+id/tv_activity_main_title_laugh" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_laugh" /> <TextView android:id="@+id/tv_activity_main_title_photo_news" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_photo_news" /> <TextView android:id="@+id/tv_activity_main_title_daily_hot" style="@style/activity_main_title_layout" android:onClick="onTitleClick" android:text="@string/kb_news_dailyhot" /> </LinearLayout> </HorizontalScrollView> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginRight="5dp" android:clickable="true" android:src="@drawable/index_icon_add_nor" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/activity_main_underline_height" android:background="@color/gold" /> <android.support.v4.view.ViewPager android:id="@+id/view_pager_main" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
activity代码
package com.gxuwz.android.bulletindaily.ui; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.view.View; import android.widget.HorizontalScrollView; import android.widget.LinearLayout; import android.widget.TextView; import com.gxuwz.android.bulletindaily.R; import com.gxuwz.android.bulletindaily.adapter.ViewPagerAdapter; import com.gxuwz.android.bulletindaily.ui.fragment.BulletinFragment; import com.gxuwz.android.bulletindaily.ui.fragment.DisportFragment; import org.xutils.view.annotation.ContentView; import org.xutils.view.annotation.ViewInject; import org.xutils.x; import java.util.ArrayList; @ContentView(R.layout.activity_main) public class MainActivity extends AppCompatActivity { // 快报 @ViewInject(R.id.tv_activity_main_title_timeline) private TextView timeLine; // 娱乐 @ViewInject(R.id.tv_activity_main_title_bagua) private TextView baguaNews; // 社会 @ViewInject(R.id.tv_activity_main_title_qipa) private TextView qipaNews; // 短视频 @ViewInject(R.id.tv_activity_main_title_video_news) private TextView videoNews; // 互联网 @ViewInject(R.id.tv_activity_main_title_tech) private TextView techNews; // 汽车 @ViewInject(R.id.tv_activity_main_title_car) private TextView carNews; // 体育 @ViewInject(R.id.tv_activity_main_title_sports) private TextView sportsNews; // 财经 @ViewInject(R.id.tv_activity_main_title_finance) private TextView financeNews; // 军事 @ViewInject(R.id.tv_activity_main_title_mil) private TextView milNews; // 搞笑 @ViewInject(R.id.tv_activity_main_title_laugh) private TextView laughNews; // 图片 @ViewInject(R.id.tv_activity_main_title_photo_news) private TextView photoNews; // 热评 @ViewInject(R.id.tv_activity_main_title_daily_hot) private TextView dailyHot; @ViewInject(R.id.view_pager_main) private ViewPager mViewPager; @ViewInject(R.id.hs_main) private HorizontalScrollView mHorizontalScrollView; @ViewInject(R.id.ll_title) private LinearLayout mLinearLayout; private ArrayList<TextView> titleList; //初始化偏移量 private int offset = 0; private int scrollViewWidth = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); x.view().inject(this); initViewPager(); addListener(); // #E94221 } private void initViewPager() { ArrayList<Fragment> fragments = new ArrayList<Fragment>(); titleList = new ArrayList<TextView>(); //在这里添加fragment fragments.add(new BulletinFragment()); titleList.add(timeLine); fragments.add(new DisportFragment()); titleList.add(baguaNews); fragments.add(new BulletinFragment()); titleList.add(qipaNews); fragments.add(new BulletinFragment()); titleList.add(videoNews); fragments.add(new BulletinFragment()); titleList.add(techNews); fragments.add(new BulletinFragment()); titleList.add(carNews); fragments.add(new BulletinFragment()); titleList.add(sportsNews); fragments.add(new BulletinFragment()); titleList.add(financeNews); fragments.add(new BulletinFragment()); titleList.add(milNews); fragments.add(new BulletinFragment()); titleList.add(laughNews); fragments.add(new BulletinFragment()); titleList.add(photoNews); fragments.add(new BulletinFragment()); titleList.add(dailyHot); mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), fragments)); //开启动画效果 mHorizontalScrollView.setSmoothScrollingEnabled(true); } private void addListener() { mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { int color = Color.rgb(233, 63, 33); // #E94221 for (int i = 0; i < titleList.size(); i++) { TextView title = titleList.get(i); title.setTextColor(Color.GRAY); } final TextView textView = titleList.get(position); textView.setTextColor(color); scrollViewWidth = mHorizontalScrollView.getWidth(); if ((scrollViewWidth + offset) < textView.getRight()) {//需要向右移动 mHorizontalScrollView.smoothScrollBy(textView.getRight() - (scrollViewWidth + offset), 0); offset += textView.getRight() - (scrollViewWidth + offset); } if (offset > textView.getLeft()) {//需要向左移动 mHorizontalScrollView.smoothScrollBy(textView.getLeft() - offset, 0); offset += textView.getLeft() - offset; } } @Override public void onPageScrollStateChanged(int state) { } }); } public void onTitleClick(View view) { switch (view.getId()) { case R.id.tv_activity_main_title_timeline: changeTitleColor(0); break; case R.id.tv_activity_main_title_bagua: changeTitleColor(1); break; case R.id.tv_activity_main_title_qipa: changeTitleColor(2); break; case R.id.tv_activity_main_title_video_news: changeTitleColor(3); break; case R.id.tv_activity_main_title_tech: changeTitleColor(4); break; case R.id.tv_activity_main_title_car: changeTitleColor(5); break; case R.id.tv_activity_main_title_sports: changeTitleColor(6); break; case R.id.tv_activity_main_title_finance: changeTitleColor(7); break; case R.id.tv_activity_main_title_mil: changeTitleColor(8); break; case R.id.tv_activity_main_title_laugh: changeTitleColor(9); break; case R.id.tv_activity_main_title_photo_news: Log.d("TAG", "onTitleClick() returned: " + "tv_activity_main_title_photo_news"); changeTitleColor(10); break; case R.id.tv_activity_main_title_daily_hot: changeTitleColor(11); break; } } /** * 改变 标题颜色 * * @param position viewpager当前位置 */ public void changeTitleColor(int position) { mViewPager.setCurrentItem(position); } }