Как я могу заставить кнопку отображаться под WebView внутри CoordinatorLayout

У меня есть WebView внутри CoordinatorLayout и Button под WebView, но кнопка никогда не появляется. Я также пробовал LinearLayout и FrameLayout.

Я попытался использовать NestedScrollView вместо RelativeLayout и столкнулся с той же проблемой, и даже если бы я смог заставить его работать с NestedScrollView, я не могу использовать NestedScrollView из-за других проблемы с WebView.

Итак, что я могу сделать, чтобы кнопка отображалась под WebView без прокрутки?

Это мой макет:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.webviewwithbutton.WebViewWithButton">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <WebView
            android:id="@+id/webview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"></WebView>

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_below="@+id/webview"
            android:text="test"/>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

И это мой код Java:

public class WebViewWithButton extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view_with_button);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        WebView view = (WebView) findViewById(R.id.webview);
        view.setWebViewClient(new WebViewClient());
        WebSettings settings = view.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setAllowContentAccess(true);
        settings.setAppCacheEnabled(true);
        settings.setDatabaseEnabled(true);
        settings.setDomStorageEnabled(true);
        settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setBuiltInZoomControls(true);

        settings.setAppCacheEnabled(true);
        settings.setAppCachePath(getCacheDir().getAbsolutePath());
        settings.setDatabaseEnabled(true);
        settings.setSupportMultipleWindows(true);
        settings.setLoadWithOverviewMode(true);
        settings.setUseWideViewPort(true);
        settings.setDomStorageEnabled(true);
        settings.setAllowContentAccess(true);
        settings.setAllowFileAccess(true);
        settings.setSaveFormData(true);

        view.loadUrl("http://vimeo.com");
    }


}

РЕДАКТИРОВАТЬ: Просто чтобы уточнить, я хочу использовать CoordinatorLayout. Я знаю, что могу легко справиться с этим без него, проблема только при использовании CoordinatorLayout.

РЕДАКТИРОВАТЬ: Мой размерный файл:

<resources>
    <dimen name="app_bar_height">180dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="text_margin">16dp</dimen>
</resources>

РЕДАКТИРОВАТЬ: Styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

</resources>

РЕДАКТИРОВАТЬ: я должен упомянуть, что все, что я сделал для его создания, — это использование одного из шаблонов Android Studio под названием Scrolling Activity.

casolorz 26.01.2016 источник

comment

Почему бы вам просто не использовать LinearLayout вместо RelativeLayout? - natario 27.01.2016

comment

Я тоже пробовал, та же проблема. - casolorz 27.01.2016

comment

@mntgoat - как насчет FrameLayout? я сделал это, и это работает, взгляните на мой ответ. - ʍѳђઽ૯ท 27.01.2016

comment

@LinX64 LinX64 да, я тоже это пробовал. - casolorz 27.01.2016

comment

Какие версии Android вы тестировали этот код? - romtsn 29.01.2016

comment

Я в основном разрабатываю под Marshmallow, но я думаю, что тестировал его и на более старых версиях. В любом случае, мне нужно, чтобы он работал на 4+. - casolorz 29.01.2016

comment

Хорошо, я думаю, что могу вам помочь, но нужно посмотреть на ваши стили, как я написал ниже. - romtsn 29.01.2016

comment

Добавлены стили. Если вы хотите, вы также можете создать точно такой же код, используя шаблон активности прокрутки в студии Android, а затем просто добавить WebView и Button. Оттуда вы можете начать экспериментировать с заменой NestedScrollView тем, что, по вашему мнению, может работать. - casolorz 29.01.2016

comment

при размещении координат, если щелкнуть любой значок меню параметров, текст заголовка панели инструментов невидим, пожалуйста, помогите мне всегда отображать заголовок на панели инструментов. - Harsha 01.02.2016

Ответы (2)

arrow_upward
3
arrow_downward

Ваш код не работает, потому что WebView растягивается до своей родительской высоты, когда вы загружаете и указываете там URL, поэтому Button будет за пределами экрана. Только нужно Button ставить не под WebView, а WebView выше Button, используя свойство layout_above:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.webviewwithbutton.WebViewWithButton">

    <android.support.design.widget.CoordinatorLayout
        android:layout_above="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay"/>

            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nested_scroll_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="bottom|end"/>

    </android.support.design.widget.CoordinatorLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true"
        android:text="test"/>

</RelativeLayout>

РЕДАКТИРОВАТЬ: я нашел способ, как это сделать: вам просто нужно поместить CoordinatorLayout и Button внутрь RelativeLayout и сделать то же самое: поместить CoordinatorLayout над Button, используя свойство layout_above. Он должен работать, как ожидалось. Просто замените мой xml выше своим.

romtsn 29.01.2016

comment

Это почти работает, за исключением того, что он покрывает большую часть вещей, которые находятся под моей панелью инструментов. Если я только заменю материал внутри RelativeLayout в своем коде, это не сработает. - casolorz; 29.01.2016

comment

Опубликуйте свой styles.xml тогда, нужно посмотреть на ваши AppTheme.AppBarOverlay и AppTheme.PopupOverlay. - romtsn; 29.01.2016

comment

Отредактировал и добавил это. Чтобы сделать пример, все, что я сделал, это использовал шаблон активности прокрутки в Android Studio и добавил WebView в NestedScrollView, а когда это не сработало, я попробовал несколько других вещей, таких как RelativeLayout и т. д. - casolorz; 29.01.2016

comment

Рад помочь :) И с нетерпением жду вашей щедрости :) - romtsn; 29.01.2016

comment

Да, просто жду, когда переполнение стека позволит мне дать его, они говорят, что мне нужно ждать 3 часа. - casolorz; 29.01.2016

arrow_upward
0
arrow_downward

Попробуйте это:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.webviewwithbutton.WebViewWithButton">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <WebView
                android:id="@+id/webview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>

    </ScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout>

ʍѳђઽ૯ท 26.01.2016

comment

Спасибо за ответ. Две проблемы. Во-первых, я не могу использовать NestedScrollView, пока не будут исправлены ошибки между ним и WebView, например, загрузить vimeo.com и пройти весь путь до конца, страница не заметит, что вы дошли до конца, поэтому он сидит там, не загружая больше контента. Вторая проблема, на вашем скриншоте похоже, что кнопка наложена поверх WebView, мне нужно, чтобы она была под. - casolorz; 27.01.2016

comment

@mntgoat - Вы должны сообщить о них code.google, если обнаружите какие-либо ошибки или что-то еще (кстати). Обновлен ответ с тем, что вы именно хотите. - ʍѳђઽ૯ท; 27.01.2016

comment

Я сообщил об этом. Я не уверен, что делает это решение. Пробовал с FrameLayout - не работает, пробовал без - тоже не работает. Ты используешь его внутри CoordinatorLayout, потому что мне нужно это использовать. - casolorz; 27.01.2016

comment

@mntgoat - я обновил ответ полным кодом. у вас нет опыта работы с этим дизайном. вы можете взглянуть: saulmm.github.io/mastering-coordinator - ʍѳђઽ૯ท; 27.01.2016

comment

Спасибо за код, но я скопировал его, и у него те же две проблемы. Кнопка не отображается до тех пор, пока я не прокручу до конца страницы, а сама страница не знает, что я прокрутил до конца. - casolorz; 27.01.2016

comment

Итак, вы хотите показывать это все время как FloatingActionButton? - ʍѳђઽ૯ท; 27.01.2016

comment

Да, но не поверх WebView, я хочу, чтобы он был ниже WebView, поэтому я пытался использовать RelativeLayout. - casolorz; 27.01.2016

comment

Ну, я сделал это именно под WebView кстати. - ʍѳђઽ૯ท; 31.01.2016

comment

Опубликуйте свои коды, создав новый вопрос или сначала найдите его: stackoverflow.com/questions/27643248/ - ʍѳђઽ૯ท; 01.02.2016

Как я могу заставить кнопку отображаться под WebView внутри CoordinatorLayout

Ответы (2)

Похожие вопросы