Clickable table of contents

Question

I am attempting to make a 'table of contents' that is similar in feel to wikipedias as shown here.

I have a ScrollView which contains many TextViews. I have made a 'table of contents' that has clickable elements, but I cannot figure out how to make the ScrollView scrollTo() the right spot.

I attempted to convert the TextView to a string, and use s.IndexOf(), but it gives me the location of the text within the string, not within the ScrollView. This behavour makes sense

I then tried to look at other ScrollView methods to find something helpful, but ran out of ideas.

If I could find the IndexOf the TextView within the ScrollView I could easily ScrollTo that spot, but I cannot figure out how to do this.

Thanks, EDIT2: This is very similiar to hyperlinking to an inline anchor in HTML, using the # as described here.

EDIT: added my XML, this would seem to be the only important part of the code to make it more clear. The goal is to hit the TextView with id KeyQuestionsTextView and have it scroll down to the TextView with id KeyQuestions. I have made the onclick listener for KeyQuestionsTextView register the OnClick event, but I do not know how to make the ScrollView scroll to the right spot. I really need to just get the Y offset of the desired TextView within the ScrollView, as the ScrollTo method is straightforward it seems.

The above example will be repeated for PhysicalExamTextView DiagnosticReasoning and Emergencies. Those four elements compose my 'table of contents'.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Platform2_option1" >



<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
        android:id="@+id/Intro"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Plat2Option1Intro" />

        <View
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:background="#000000" />

        <TextView
         android:id="@+id/KeyQuestionsTextView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/KeyQuestionsTitle" />
        <TextView
         android:id="@+id/PhysicalExamTextView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/PhysicalExamTitle" />
        <TextView
         android:id="@+id/DiagnosticReasoningTextView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/DiagnosticReasoningTitle" />
        <TextView
         android:id="@+id/EmergenciesTextView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/EmergenciesTitle" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dip"
            android:background="#000000" />


        <TextView
            android:id="@+id/KeyQuestions"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Plat2Option1KeyQuestions" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dip"
            android:background="#000000" />

        <TextView
            android:id="@+id/PhysicalExam"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Plat2Option1PhysicalExam" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dip"
            android:background="#000000" />

        <TextView
            android:id="@+id/DiagnosticReasoning"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Plat2Option1DiagReasoning" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dip"
            android:background="#000000" />

        <TextView
            android:id="@+id/Emergencies"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Plat2Option1Emergencies" />

    </LinearLayout>
</ScrollView>

Basim Sherif · Answer 1 · 2013-05-27T04:27:39.200

0

I have got a solution.First you get the Y axis of touch, when you click on a Textview like this,

    @Override
public boolean onTouchEvent(MotionEvent event) {

    int y = (int)event.getY();

return false;
}

Then scroll your scroll view to that Y axis like,

YourScrollView.scrollTo(0, y);//here y is the y axis coordinate got from touch event

edited May 27 '13 at 04:27

answered May 27 '13 at 04:16

Basim Sherif

5,384
7
48
90

Currently the `ScrollView` has a `LinearLayout` inside it of. I did some quick searching about making that a `TableLayout` and found minimal positive results. Can anyone else chime in on if this may work before I head down that road? http://stackoverflow.com/questions/6585019/tablelayout-in-scrollview-not-working http://stackoverflow.com/questions/8861851/scrollview-doesnt-display-whole-tablelayout – fooOnYou May 27 '13 at 04:19
With the 'table of contents' layout in Wikipedia that I am trying to emulate, you click on an item in the table of contents and it scrolls to that content. I am not sure how the above code would get me from the `OnClick` event to scroll to the new location. The `OnClick` Event is triggered many many lines above the actual `TextView` I want to scroll to. I am unfamiliar with MotionEvents, and maybe somehow this could help me 'index' the different `TextViews` I am hoping to navigate to, but I am not certain of this. – fooOnYou May 27 '13 at 04:33
Can you post your code, so that your qstn will be more clear. – Basim Sherif May 27 '13 at 04:43
Added my XML file I am working with, not sure if that'll help or not. – fooOnYou May 27 '13 at 04:53

score 0 · Answer 2 · answered May 27 '13 at 23:56

I figured it out. I found out that I could get the Y location of the TextView fairly easily and ScrollTo it fairly easily:

ScrollView sv = (ScrollView) findViewById(R.id.scrollView1);
TextView tv = (TextView) findViewById(R.id.KeyQuestionsTextView);
sv.scrollTo(0, (int) tv.getY());

Clickable table of contents

2 Answers2