blocks|key|4061948|text|您需要使用this+SO+post中所示的VerticalViewPager，并同时使用TabLayout。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4061949|如果你遇到任何问题，请告诉我。|4061950|来自给定SO链接的代码：|4061951|/**
*+Uses+a+combination+of+a+PageTransformer+and+swapping+X+&+Y+coordinates
*+of+touch+events+to+create+the+illusion+of+a+vertically+scrolling+ViewPager.+
*+
*+Requires+API+11%2B
*+
*/
public+class+VerticalViewPager+extends+ViewPager+{

++++public+VerticalViewPager(Context+context)+{
++++++++super(context);
++++++++init();
++++}

++++public+VerticalViewPager(Context+context,+AttributeSet+attrs)+{
++++++++super(context,+attrs);
++++++++init();
++++}

++++private+void+init()+{
++++++++//+The+majority+of+the+magic+happens+here
++++++++setPageTransformer(true,+new+VerticalPageTransformer());
++++++++//+The+easiest+way+to+get+rid+of+the+overscroll+drawing+that+happens+on+the+left+and+right
++++++++setOverScrollMode(OVER_SCROLL_NEVER);
++++}

++++private+class+VerticalPageTransformer+implements+ViewPager.PageTransformer+{

++++++++@Override
++++++++public+void+transformPage(View+view,+float+position)+{

++++++++++++if+(position+<+-1)+{+//+[-Infinity,-1)
++++++++++++++++//+This+page+is+way+off-screen+to+the+left.
++++++++++++++++view.setAlpha(0);

++++++++++++}+else+if+(position+<=+1)+{+//+[-1,1]
++++++++++++++++view.setAlpha(1);

++++++++++++++++//+Counteract+the+default+slide+transition
++++++++++++++++view.setTranslationX(view.getWidth()+*+-position);

++++++++++++++++//set+Y+position+to+swipe+in+from+top
++++++++++++++++float+yPosition+=+position+*+view.getHeight();
++++++++++++++++view.setTranslationY(yPosition);

++++++++++++}+else+{+//+(1,%2BInfinity]
++++++++++++++++//+This+page+is+way+off-screen+to+the+right.
++++++++++++++++view.setAlpha(0);
++++++++++++}
++++++++}
++++}

++++/**
+++++*+Swaps+the+X+and+Y+coordinates+of+your+touch+event.
+++++*/
++++private+MotionEvent+swapXY(MotionEvent+ev)+{
++++++++float+width+=+getWidth();
++++++++float+height+=+getHeight();

++++++++float+newX+=+(ev.getY()+/+height)+*+width;
++++++++float+newY+=+(ev.getX()+/+width)+*+height;

++++++++ev.setLocation(newX,+newY);

++++++++return+ev;
++++}

++++@Override
++++public+boolean+onInterceptTouchEvent(MotionEvent+ev){
++++++++boolean+intercepted+=+super.onInterceptTouchEvent(swapXY(ev));
++++++++swapXY(ev);+//+return+touch+coordinates+to+original+reference+frame+for+any+child+views
++++++++return+intercepted;
++++}

++++@Override
++++public+boolean+onTouchEvent(MotionEvent+ev)+{
++++++++return+super.onTouchEvent(swapXY(ev));
++++}

}|code-block|syntax|javascript|4061952|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/13477820/android-vertical-viewpager|1|https://developer.android.com/reference/android/support/design/widget/TabLayout.html^0|L|H|18|9|5|C|0|18|9|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]|$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

You need to go with <code>VerticalViewPager</code> as shown in <a href="https://stackoverflow.com/questions/13477820/android-vertical-viewpager">this SO post</a> and use <a href="https://developer.android.com/reference/android/support/design/widget/TabLayout.html" rel="nofollow noreferrer"><code>TabLayout</code></a> along with it.

Let me know if you face any problem.

Code from the given SO link: 

<pre class="lang-java prettyprint-override"><code>/**
* Uses a combination of a PageTransformer and swapping X &amp; Y coordinates
* of touch events to create the illusion of a vertically scrolling ViewPager. 
* 
* Requires API 11+
* 
*/
public class VerticalViewPager extends ViewPager {

 public VerticalViewPager(Context context) {
 super(context);
 init();
 }

 public VerticalViewPager(Context context, AttributeSet attrs) {
 super(context, attrs);
 init();
 }

 private void init() {
 // The majority of the magic happens here
 setPageTransformer(true, new VerticalPageTransformer());
 // The easiest way to get rid of the overscroll drawing that happens on the left and right
 setOverScrollMode(OVER_SCROLL_NEVER);
 }

 private class VerticalPageTransformer implements ViewPager.PageTransformer {

 @Override
 public void transformPage(View view, float position) {

 if (position &lt; -1) { // [-Infinity,-1)
 // This page is way off-screen to the left.
 view.setAlpha(0);

 } else if (position &lt;= 1) { // [-1,1]
 view.setAlpha(1);

 // Counteract the default slide transition
 view.setTranslationX(view.getWidth() * -position);

 //set Y position to swipe in from top
 float yPosition = position * view.getHeight();
 view.setTranslationY(yPosition);

 } else { // (1,+Infinity]
 // This page is way off-screen to the right.
 view.setAlpha(0);
 }
 }
 }

 /**
 * Swaps the X and Y coordinates of your touch event.
 */
 private MotionEvent swapXY(MotionEvent ev) {
 float width = getWidth();
 float height = getHeight();

 float newX = (ev.getY() / height) * width;
 float newY = (ev.getX() / width) * height;

 ev.setLocation(newX, newY);

 return ev;
 }

 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev){
 boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
 swapXY(ev); // return touch coordinates to original reference frame for any child views
 return intercepted;
 }

 @Override
 public boolean onTouchEvent(MotionEvent ev) {
 return super.onTouchEvent(swapXY(ev));
 }

}
</code></pre>

blocks|key|741403|text|在这种情况下，我将使用RecyclerView。如果您将其设置为垂直方向，并将项目高度设置为match_parent，则用户可以像单页面网站一样上下滚动。此外，通过单击特定选项卡，您可以将列表滚动到特定位置。您还可以在每个项目出现/消失后使用动画。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|741404|您可以控制每个部分的设计和内容，因为RecyclerView为您提供了为每个项目提供不同设计和内容的选项。|741405|希望能有所帮助。|741406|entityMap^0|B|C|1A|C|0|I|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

I would use <code>RecyclerView</code> in this case. If you set it in vertical orientation and set item height to be <code>match_parent</code>, the user can scroll up and down like a single page website. Besides that, with clicking on the specific tab you can scroll the list to the particular position. You can also use animations once each item appears/disappears. 

You will have control over the design and content of each section as <code>RecyclerView</code> gives you the option to have different design and content for each item.

Hope it helps.

I have seen a few <code>single page Application</code> websites, in which whenever we tap any of the tab, the page gets scrolled vertically in order to show that selected section, and vice versa, if we scroll the page vertically, then the tabs automatically get changed according to the displayed section.
Something like <a href="http://moziweb.com" rel="noreferrer">this</a>

I want something like that in my android app. So please let me know how to get started with. Please guide me the direction or suggest me something which can help me out in doing that.

how to design Single page application with auto-scrolling tabs in Android?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我见过一些single page Application网站，每当我们点击任何一个标签时，页面都会垂直滚动，以便显示所选的部分，反之亦然，如果我们垂直滚动页面，那么标签会根据显示的部分自动更改。像这样的东西我希望在我的android应用程序中有类似的东西。所以请告诉我如何开始。请给我指引方向，或者给我一些建议，帮助我做...

问如何在Android中设计带有自动滚动标签的单页应用程序？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Android中设计带有自动滚动标签的单页应用程序？EN