【问题标题】:Android LinearLayout distribution of childrenAndroid LinearLayout 分布子级
【发布时间】:2014-06-13 14:57:26
【问题描述】:

我正在尝试创建一个可均匀分布子项的滑动侧面板。子代可以动态添加到父代。对于 mdpi 屏幕,每个孩子都是一个 32x32 dp 的 ImageButton。我想达到以下效果。

案例 1:孩子很少。 当布局的孩子很少时,我希望图像按钮均匀分布。

有几个孩子的面板插图:

XML 布局:

<LinearLayout
    android:id="@+id/toolbar"
    style="@style/TabbedPanelToolbar"
    android:layout_toRightOf="@id/pager"
    android:orientation="vertical" >    
        <ImageButton 
            android:src="@drawable/ic_tab_info"
            style="@style/TabbedPanelToolbarControl" />
        <ImageButton
            android:src="@drawable/ic_tab_tag"
            style="@style/TabbedPanelToolbarControl" />
        <ImageButton
            android:src="@drawable/ic_tab_chat"
            style="@style/TabbedPanelToolbarControl" />
        <ImageButton
            android:src="@drawable/ic_tab_meta"
            style="@style/TabbedPanelToolbarControl" />
</LinearLayout>

样式:

<style name="TabbedPanelToolbar" parent="android:style/Widget.ListView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:background">@null</item>
</style>

<style name="TabbedPanelToolbarControl" parent="android:style/Widget.ImageButton">
    <item name="android:background">@null</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:paddingTop">5dp</item>
    <item name="android:paddingBottom">5dp</item>
    <item name="android:layout_weight">1</item>
</style>

案例 2:许多孩子。 当有大量子级时,我希望布局压缩到某个点然后开始滚动(不再分配子级,而是开始溢出父级)。为此,我不得不添加 ScrollView。问题是子元素很少的 LinearLayout 不再均匀分布它们。

有许多孩子的面板插图:

XML 布局:

<ScrollView
    android:id="@+id/toolbar_container"
    style="@style/TabbedPanelToolbarContainer" >

    <LinearLayout
        android:id="@+id/toolbar"
        style="@style/TabbedPanelToolbar"
        android:layout_toRightOf="@id/pager"
        android:orientation="vertical" >

        <ImageButton 
            android:src="@drawable/ic_tab_info"
            style="@style/TabbedPanelToolbarControl" />
        <ImageButton
            android:src="@drawable/ic_tab_tag"
            style="@style/TabbedPanelToolbarControl" />
        <ImageButton
            android:src="@drawable/ic_tab_chat"
            style="@style/TabbedPanelToolbarControl" />
        <ImageButton
            android:src="@drawable/ic_tab_meta"
            style="@style/TabbedPanelToolbarControl" />
        ...
    </LinearLayout>

</ScrollView>

样式:

<style name="TabbedPanelToolbarContainer" parent="android:style/Widget.ScrollView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:scrollbars">none</item>
    <item name="android:scrollbarSize">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:scrollbarAlwaysDrawVerticalTrack">false</item>
    <item name="android:scrollbarStyle">insideOverlay</item>
    <item name="android:background">@null</item>
    <item name="android:divider">@null</item>
</style>

<style name="TabbedPanelToolbar" parent="android:style/Widget.ListView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:background">@null</item>
</style>

<style name="TabbedPanelToolbarControl" parent="android:style/Widget.ImageButton">
    <item name="android:background">@null</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:paddingTop">5dp</item>
    <item name="android:paddingBottom">5dp</item>
    <item name="android:layout_weight">1</item>
</style>

我的问题是是否可以通过一个 xml 布局声明来执行上述操作 - 甚至为少数孩子分发并为许多孩子滚动。如果没有,是否有一种非 hacky 的方式来使用代码(考虑到大小屏幕尺寸......儿童相应地从 24dp 增长到 96dp)。

【问题讨论】:

    标签: android android-linearlayout android-scrollview android-layout-weight


    【解决方案1】:

    天哪,这表明我对 Android 有多么陌生。所以我开始在 ADT 中使用图形布局工具并单击随机的东西(不是真的,但更像是实验)。事实证明,这是可以通过将android:fillViewport="true" 添加到 ScrollView 来实现的。最终的xml布局如下:

    <ScrollView
        android:id="@+id/toolbar_container"
        style="@style/TabbedPanelToolbarContainer"
        android:fillViewport="true" >
    
        <LinearLayout
            android:id="@+id/toolbar"
            style="@style/TabbedPanelToolbar"
            android:layout_toRightOf="@id/pager"
            android:orientation="vertical" >
    
            <ImageButton 
                android:src="@drawable/ic_tab_info"
                style="@style/TabbedPanelToolbarControl" />
            <ImageButton
                android:src="@drawable/ic_tab_tag"
                style="@style/TabbedPanelToolbarControl" />
            <ImageButton
                android:src="@drawable/ic_tab_chat"
                style="@style/TabbedPanelToolbarControl" />
            <ImageButton
                android:src="@drawable/ic_tab_meta"
                style="@style/TabbedPanelToolbarControl" />
            ...
        </LinearLayout>
    
    </ScrollView>
    

    很高兴我找到了它,相信其他人也会觉得它很有用:)

    【讨论】:

    • 我看到一个被清除的反对票。如果你能解释你的推理,我将不胜感激。正如我在回答中提到的,我猜到了解决方案。它似乎工作。但是,我想知道它是否符合 Android 规范。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-22
    相关资源
    最近更新 更多