关于android:在片段视图中显示webview的进度条

Displaying progress bar for a webview in fragment view

我正在尝试在网页出现或加载之前显示进度条。我已经在 PlanetFragment 的 onCreateView 方法中声明了进度条,它扩展了片段我已经删除了网页的监听器。但是无论我写什么代码,进度条都不会出现。请帮忙

这是我的 MainActivity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
public class MainActivity extends Activity {

private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;

private CharSequence mDrawerTitle;
private CharSequence mTitle;
private String[] mPlanetTitles;

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

    mTitle = mDrawerTitle = getTitle();
    mPlanetTitles = getResources().getStringArray(R.array.planets_array);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mDrawerList = (ListView) findViewById(R.id.left_drawer);

    // set a custom shadow that overlays the main content when the drawer
    // opens
    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
            GravityCompat.START);
    // set up the drawer's list view with items and click listener
    mDrawerList.setAdapter(new ArrayAdapter<String>(this,
            R.layout.drawer_list_item, mPlanetTitles));
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    // enable ActionBar app icon to behave as action to toggle nav drawer
    getActionBar().setDisplayHomeAsUpEnabled(true);
    getActionBar().setHomeButtonEnabled(true);

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the sliding drawer and the action bar app icon
    mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity */
    mDrawerLayout, /* DrawerLayout object */
    R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
    R.string.drawer_open, /*"open drawer" description for accessibility */
    R.string.drawer_close /*"close drawer" description for accessibility */
    ) {
        public void onDrawerClosed(View view) {
            getActionBar().setTitle(mTitle);
            invalidateOptionsMenu(); // creates call to
                                        // onPrepareOptionsMenu()
        }

        public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu(); // creates call to
                                        // onPrepareOptionsMenu()
        }
    };
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    if (savedInstanceState == null) {
        selectItem(0);
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main, menu);
    return super.onCreateOptionsMenu(menu);
}

/* Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    // If the nav drawer is open, hide action items related to the content
    // view
    boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
    menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
    return super.onPrepareOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // The action bar home/up action should open or close the drawer.
    // ActionBarDrawerToggle will take care of this.
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    // Handle action buttons
    switch (item.getItemId()) {
    case R.id.action_websearch:
        // create intent to perform web search for this planet
        Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);
        intent.putExtra(SearchManager.QUERY, getActionBar().getTitle());
        // catch event that there's no activity to handle intent
        if (intent.resolveActivity(getPackageManager()) != null) {
            startActivity(intent);
        } else {
            Toast.makeText(this, R.string.app_not_available,
                    Toast.LENGTH_LONG).show();
        }
        return true;
    default:
        return super.onOptionsItemSelected(item);
    }
}

/* The click listner for ListView in the navigation drawer */
private class DrawerItemClickListener implements
        ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView< ? > parent, View view, int position,
            long id) {
        selectItem(position);
    }
}

private void selectItem(int position) {
    // update the main content by replacing fragments
    Fragment fragment = new PlanetFragment();
    Bundle args = new Bundle();
    args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
    fragment.setArguments(args);

    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.beginTransaction()
            .replace(R.id.content_frame, fragment).commit();

    // update selected item and title, then close the drawer
    mDrawerList.setItemChecked(position, true);
    setTitle(mPlanetTitles[position]);
    mDrawerLayout.closeDrawer(mDrawerList);
}

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

/**
 * When using the ActionBarDrawerToggle, you must call it during
 * onPostCreate() and onConfigurationChanged()...
 */

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    // Sync the toggle state after onRestoreInstanceState has occurred.
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    // Pass any configuration change to the drawer toggls
    mDrawerToggle.onConfigurationChanged(newConfig);
}

/**
 * Fragment that appears in the"content_frame", shows a planet
 */
public static class PlanetFragment extends Fragment {
    public static final String ARG_PLANET_NUMBER ="planet_number";

    public PlanetFragment() {
        // Empty constructor required for fragment subclasses
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_planet,
                container, false);
        int i = getArguments().getInt(ARG_PLANET_NUMBER);
        String planet = getResources()
                .getStringArray(R.array.planets_array)[i];

        int imageId = getResources().getIdentifier(
                planet.toLowerCase(Locale.getDefault()),"drawable",
                getActivity().getPackageName());

        final WebView webview = ((WebView) rootView
                .findViewById(R.id.image));

        final ProgressBar progressbar = ((ProgressBar) rootView
                .findViewById(R.id.progressbar));





        webview.getSettings().setJavaScriptEnabled(true);
        final PlanetFragment activity = this;


        webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {

                webview.loadUrl("javascript:document.getElementsByClassName('header')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('icon-anon')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('search')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('wh_ad')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('cse_x')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('wh_search')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('wh_ad')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('wh_ad')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('footer_random_button')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('mw-mf-page-left')[0].style.display="none";");
                webview.loadUrl("javascript:document.getElementsByClassName('mw-mf-viewport')[0].style.display="none";");

                webview.getSettings().setJavaScriptEnabled(false);

            }
        });

        webview.loadUrl(planet);
        getActivity().setTitle(planet);
        return rootView;
    }
}

}

这是我的 xml 布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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"
tools:context=".MainActivity">

<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="5dp" />

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

这是因为 ProgressBar 它在您的 xml 中"低于"WebView(这意味着在 xml 中声明的第一个小部件将是最深层次的小部件,小部件是堆叠的)。

尽量把ProgressBar放到xml下面,必要时隐藏,如下图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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"
 tools:context=".MainActivity">

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

 <ProgressBar
      android:id="@+id/progressbar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginRight="5dp" />

</RelativeLayout>

目前 WebView 停留在您的 ProgressBar

前面


这样的事情应该可以工作。我还没有测试过(现在没有编辑器)。解决方案是隐藏 webview 并在适当的时候显示它。

1
2
3
4
5
6
7
8
9
10
11
12
 webview.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
           view.setVisibility(View.VISIBLE);
           //you might need this
           view.bringToFront();
        }
        @Override
        public void onPageStarted(WebView view, String url,  Bitmap favicon) {
           view.setVisibility(View.GONE);//hide the webview that will display your dialog
        }
    });