Веб-просмотр в режиме прокрутки

Обновление от 13 ноября 2014 г. Поскольку Android KitKat ни одно из описанных ниже решений не работает, вам придется искать другие подходы, например FadingActionBar Мануэля Пейнадо, который обеспечивает прокручиваемый заголовок для WebViews.

Обновление 2012-07-08: компания «Nobu games» любезно создала TitleBarWebView, возвращающий ожидаемое поведение в Android Jelly Bean. При использовании на более старых платформах он будет использовать скрытый метод setEmbeddedTitleBar(), а при использовании на Jelly Bean или выше он будет имитировать такое же поведение. Исходный код доступен по лицензии Apache 2 в коде Google

Обновление 30.06.2012: Похоже, что метод setEmbeddedTitleBar() был удален в Android 4.1, также известном как Jelly Bean :-(

Исходный ответ:

можно поместить WebView в ScrollView, и это действительно работает. Я использую это в GoodNews на устройствах Android 1.6. Основным недостатком является то, что пользователь не может прокручивать "по диагонали", что означает: если веб-контент превышает ширину экрана, ScrollView отвечает за вертикальную прокрутку, а WebView - за горизонтальную. Поскольку только один из них обрабатывает события касания, вы можете выполнять прокрутку по горизонтали или по вертикали, но не по диагонали.

Кроме того, возникают некоторые неприятные проблемы, описанные вами (например, пустое вертикальное пространство при загрузке содержимого, меньшего, чем предыдущее). Я нашел обходные пути для всех из них в GoodNews, но сейчас не могу их вспомнить, потому что нашел гораздо лучшее решение:

Если вы поместите WebView в ScrollView, чтобы разместить элементы управления над веб-контентом, и вы готовы поддерживать только Android 2 и выше, то вы можете использовать скрытый внутренний setEmbeddedTitleBar() метод WebView. Он был представлен в API уровня 5 и (случайно?) Стал общедоступным только для одного выпуска (я думаю, это был 3.0).

Этот метод позволяет встроить макет в WebView, который будет размещен над веб-контентом. Этот макет будет прокручивать экран при вертикальной прокрутке, но будет оставаться в том же горизонтальном положении, когда веб-контент прокручивается по горизонтали.

Поскольку этот метод не экспортируется API, вам необходимо использовать отражения Java для его вызова. Я предлагаю создать новый класс следующим образом:

public final class WebViewWithTitle extends ExtendedWebView {
    private static final String LOG_TAG = "WebViewWithTitle";
    private Method setEmbeddedTitleBarMethod = null;

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

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

    private void init() {
        try {
            setEmbeddedTitleBarMethod = WebView.class.getMethod("setEmbeddedTitleBar", View.class);
        } catch (Exception ex) {
            Log.e(LOG_TAG, "could not find setEmbeddedTitleBar", ex);
        }
    }

    public void setTitle(View view) {
        if (setEmbeddedTitleBarMethod != null) {
            try {
                setEmbeddedTitleBarMethod.invoke(this, view);
            } catch (Exception ex) {
                Log.e(LOG_TAG, "failed to call setEmbeddedTitleBar", ex);
            }
        }
    }

    public void setTitle(int resId) {
        setTitle(inflate(getContext(), resId, null));
    }
}

Затем в свой файл макета вы можете включить это, используя

<com.mycompany.widget.WebViewWithTitle
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

и где-нибудь еще в вашем коде вы можете вызвать метод setTitle() с идентификатором макета, который будет встроен в WebView.

использовать:

android:descendantFocusability="blocksDescendants"

в компоновке упаковки это предотвратит скачок WebView к своему началу.

использовать:

webView.clearView();
mNewsContent.requestLayout();

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

Вот реализация WebView, содержащая еще одно представление «Строка заголовка» вверху.

Как это выглядит:

Красная полоса + 3 кнопки - это «Строка заголовка», ниже - веб-вид, все прокручиваются и обрезаются в один прямоугольник.

Он чистый, короткий, работает от API 8 до 16 и выше (с небольшими усилиями он может работать и с API 8). Он не использует никаких скрытых функций, таких как WebView.setEmbeddedTitleBar.

public class TitleWebView extends WebView{

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

   private int titleHeight;

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      // determine height of title bar
      View title = getChildAt(0);
      titleHeight = title==null ? 0 : title.getMeasuredHeight();
   }

   @Override
   public boolean onInterceptTouchEvent(MotionEvent ev){
      return true;   // don't pass our touch events to children (title bar), we send these in dispatchTouchEvent
   }

   private boolean touchInTitleBar;
   @Override
   public boolean dispatchTouchEvent(MotionEvent me){

      boolean wasInTitle = false;
      switch(me.getActionMasked()){
      case MotionEvent.ACTION_DOWN:
         touchInTitleBar = (me.getY() <= visibleTitleHeight());
         break;

      case MotionEvent.ACTION_UP:
      case MotionEvent.ACTION_CANCEL:
         wasInTitle = touchInTitleBar;
         touchInTitleBar = false;
         break;
      }
      if(touchInTitleBar || wasInTitle) {
         View title = getChildAt(0);
         if(title!=null) {
            // this touch belongs to title bar, dispatch it here
            me.offsetLocation(0, getScrollY());
            return title.dispatchTouchEvent(me);
         }
      }
      // this is our touch, offset and process
      me.offsetLocation(0, -titleHeight);
      return super.dispatchTouchEvent(me);
   }

   /**
    * @return visible height of title (may return negative values)
    */
   private int visibleTitleHeight(){
      return titleHeight-getScrollY();
   }       

   @Override
   protected void onScrollChanged(int l, int t, int oldl, int oldt){
      super.onScrollChanged(l, t, oldl, oldt);
      View title = getChildAt(0);
      if(title!=null)   // undo horizontal scroll, so that title scrolls only vertically
         title.offsetLeftAndRight(l - title.getLeft());
   }

   @Override
   protected void onDraw(Canvas c){

      c.save();
      int tH = visibleTitleHeight();
      if(tH>0) {
         // clip so that it doesn't clear background under title bar
         int sx = getScrollX(), sy = getScrollY();
         c.clipRect(sx, sy+tH, sx+getWidth(), sy+getHeight());
      }
      c.translate(0, titleHeight);
      super.onDraw(c);
      c.restore();
   }
}

Использование: поместите иерархию представления строки заголовка внутри элемента ‹WebView› в макете xml. WebView наследует ViewGroup, поэтому он может содержать потомков, несмотря на то, что плагин ADT жалуется, что не может. Пример:

<com.test.TitleWebView
   android:id="@+id/webView"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layerType="software" >

   <LinearLayout
      android:id="@+id/title_bar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#400" >

      <Button
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Button" />

      <Button
         android:id="@+id/button3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Button" />

      <Button
         android:id="@+id/button5"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Button" />
   </LinearLayout>
</com.test.TitleWebView>

Обратите внимание на использование layerType = "software", WebView в аппаратном обеспечении на API 11+ не анимирован и отрисован должным образом, если у него есть hw-слой.

Прокрутка работает отлично, равно как и щелчки по строке заголовка, щелчки в Интернете, выделение текста в Интернете и т. Д.

Спасибо за вопрос, @Dmitriy! А также большое спасибо @sven за ответ.

Но я надеюсь, что есть обходной путь для случаев, когда нам нужно поместить WebView в ScrollView. Как правильно заметил sven, основная проблема заключается в том, что режим прокрутки перехватывает все события касания, которые можно использовать для вертикальной прокрутки. Таким образом, обходной путь очевиден - расширьте представление прокрутки и переопределите метод ViewGroup.onInterceptTouchEvent(MotionEvent e) таким образом, чтобы представление прокрутки стало терпимым к его дочерним представлениям:

1. обрабатывать все события касания, которые можно использовать для вертикальной прокрутки.
2. отправьте их все дочерним представлениям.
3. перехватывать события только с вертикальной прокруткой (dx = 0, dy> 0)

Конечно, это решение можно использовать только в паре с соответствующей планировкой. Я сделал образец макета, который может проиллюстрировать основную идею.

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

    <com.rus1f1kat0r.view.TolerantScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

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

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

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

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Medium Text"
                android:textAppearance="?android:attr/textAppearanceMedium" />

           <TextView
               android:id="@+id/textView4"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="Medium Text"
               android:textAppearance="?android:attr/textAppearanceMedium" />

        </LinearLayout>
    </com.rus1f1kat0r.view.TolerantScrollView>
</RelativeLayout>

Таким образом, основная идея заключается в том, чтобы избежать конфликтов вертикальной прокрутки, поместив все представления (заголовок, веб-просмотр, нижний колонтитул) внутри вертикального линейного макета и правильно отправляя события касания, чтобы разрешить горизонтальную и диагональную прокрутку. Я не уверен, что это может быть полезно, но я создал образец проекта с TolerantScrollView и образец макета, вы можете скачать его здесь.

Более того - я просмотрел решение с доступом к закрытому API через размышления, и я думаю, что это довольно удачно. Это также не работает для меня из-за артефактов серого прямоугольника в веб-просмотре на некоторых устройствах HTC с Android ICS. Может кто знает, в чем проблема и как ее решить?

Ни один из этих ответов не работает для меня, поэтому вот мое решение. Прежде всего нам нужно переопределить WebView, чтобы иметь возможность обрабатывать его прокрутку. Вы можете узнать, как это сделать, здесь: https://stackoverflow.com/a/14753235/1285670

Затем создайте свой xml с двумя представлениями, где одно - WebView, а другое - макет вашего заголовка.

Это мой xml-код:

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

  <com.project.ObservableWebView
      android:id="@+id/post_web_view"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#fff" />

  <LinearLayout
      android:id="@+id/post_header"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#fff"
      android:orientation="vertical"
      android:paddingLeft="@dimen/common_ui_space"
      android:paddingRight="@dimen/common_ui_space"
      android:paddingTop="@dimen/common_ui_space" >

      ////some stuff

    </LinearLayout>

</FrameLayout>

Далее следует обработать WebView scroll и переместить заголовок, соответствующий значению прокрутки. Здесь вы должны использовать NineOldAndroids.

@Override
public void onScroll(int l, int t, int oldl, int oldt) {
    if (t < mTitleLayout.getHeight()) {
        ViewHelper.setTranslationY(mTitleLayout, -t);
    } else if (oldt < mTitleLayout.getHeight()) {
        ViewHelper.setTranslationY(mTitleLayout, -mTitleLayout.getHeight());
    }
}

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

v.getViewTreeObserver().addOnGlobalLayoutListener(
    new OnGlobalLayoutListener() {
        @SuppressWarnings("deprecation")
        @SuppressLint("NewApi")
        @Override
        public void onGlobalLayout() {
            if (mTitleLayout.getHeight() != 0) {
                if (Build.VERSION.SDK_INT >= 16)
                    v.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                else
                    v.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                }

                mWebView.loadDataWithBaseURL(null, "<div style=\"padding-top: " 
                  + mTitleLayout.getHeight() / dp + "px\">" + mPost.getContent() 
                  + "</div>", "text/html", "UTF8", null);
        }
});

Я знаю, что размещать веб-просмотр в режиме прокрутки неправильно, но, похоже, у меня нет другого выбора.

Да, вы делаете, потому что то, что вы хотите, не будет работать надежно.

Но я должен поместить несколько представлений в тот же просмотр прокрутки перед просмотром веб-страниц.

Удалите ScrollView. Измените android:layout_height вашего WebView на fill_parent. WebView заполнит все оставшееся пространство в LinearLayout, не занятое другими виджетами.