Android

时间:2016-04-20 18:36:28

标签: android tabs overlap overlapping

我正在构建一个Android应用程序,在我的MainActivity上,我有一个“开关”按钮,在它下面我有一个带有三个不同标签的栏。

开关按钮可以设置为“开”和“关”。这是我尝试做的第一件事,它运作得很好。但是在我添加了带有标签的栏后,开关按钮停止工作,它似乎在这个栏内有一些不允许开关工作的东西。我是Android开发的新手。

这是我的主要活动代码:

如果我删除或评论“// Tabs”中的所有内容,则开关再次开始工作,否则它不会从开启变为关闭。

public class MainScreen  extends AppCompatActivity{

    Switch list_toggle;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_screen);

        final TextView textView4 = (TextView) findViewById(R.id.textView4);

        textView4.setText(Html.fromHtml("Absent"));

        list_toggle = (Switch) findViewById(R.id.mySwitch);
        list_toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {

                    textView4.setText(Html.fromHtml("Available"));

                } else {

                    textView4.setText(Html.fromHtml("Absent"));

                }
            }
        });

        //Tabs

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("Orders"));
        tabLayout.addTab(tabLayout.newTab().setText("Past Orders"));
        tabLayout.addTab(tabLayout.newTab().setText("More"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

这是我的XML代码:

<?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"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@drawable/topbg"
        android:minHeight="?attr/actionBarSize">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@drawable/top_logo" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Hi, Marcos"
                android:id="@+id/textView3"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:textSize="12dp" />

        </RelativeLayout>
    </android.support.v7.widget.Toolbar>

    <Switch
        android:id="@+id/mySwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="true"
        android:textOn="ON"
        android:thumb="@drawable/customswitchselector"
        android:track="@drawable/custom_track"
        android:textOff="OFF"
        android:layout_marginTop="28dp"
        android:textColor="#ffffff"
        android:layout_marginLeft="50dp"
        android:layout_marginStart="50dp"
        android:layout_below="@+id/toolbar"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView4"
        android:layout_marginRight="69dp"
        android:layout_marginEnd="69dp"
        android:textColor="#a6a6a6"
        android:textSize="30dp"
        android:layout_alignBottom="@+id/mySwitch"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:elevation="6dp"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="149dp" />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager1"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/tab_layout"/>

    </RelativeLayout>

</RelativeLayout>

1 个答案:

答案 0 :(得分:0)

使用RelativeLayout表示您将子视图相对相互定位。例如,您可能会说TabLayout显示在Switch下方。为了表明两个视图之间的关系,使用了这两个属性:android:layout_belowandroid:layout_toRightOf。使用它们,您说我希望此视图位于视图的下方或右侧,并具有以下资源ID。在您的情况下,这是TabLayout的布局应该如何:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/mySwitch">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="149dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager1"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

</RelativeLayout>

请注意,您SwitchToolbar之间的关系已经相同。

还有其他标签使用RelativeLayout(将视图居中,或将其捕捉到布局的边缘)。如果您没有为子视图提供任何内容,则默认情况下将在RelativeLayout的左上角绘制。如果那里已有视图,那么它们就会彼此重叠。如果您没有为任何子视图提供定位信息,则会在左上边缘绘制所有视图,并且所有视图都可以重叠。有时这是我们正在寻找的行为,但不是在你的情况下。您没有为xml和Android中的Tab部分的布局添加属性,只是在Switch的顶部绘制它。所以这个布局得到了Switch的触摸事件,这是为什么它没有用。

但是为什么让Switch最后一个孩子工作?因为视图是按照它们在xml中的顺序绘制的。因此,当Switch为最后一个时,它会在RelativeLayout子项之后最后绘制,并且它是最后一个。这意味着它现在可以获得触摸事件。但是,您可以看到使用属性是更好的解决方案。它们实际上是为了解决像你这样的情况,并且使用孩子的顺序是微妙的。