HorizontalScrollView的滚动到指定位置问题记录

最新推荐文章于 2022-10-14 17:22:04 发布

fulunyong

最新推荐文章于 2022-10-14 17:22:04 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：项目经验文章标签： HorizontalScrollView 滚动指定位置显示

本文链接：https://blog.youkuaiyun.com/fulunyong/article/details/49887699

项目经验专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Android应用中实现滚动视图与标题联动的功能，包括XML布局设计与代码实现细节，确保滑动时标题始终保持可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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


}