Verwenden Sie Android, um WeChat zu imitieren und den Fortschrittsbalken der H5-Seite zu laden

In diesem Artikel wird hauptsächlich der Fortschrittsbalken zum Laden der H5-Seite für Android im Detail vorgestellt, der einen gewissen Referenzwert hat

Vorwort

Beim Einchecken der Front-End-Seite von WebView in Android wird diese von der Netzwerkumgebung und der Größe des Seiteninhalts beeinflusst, was manchmal dazu führt, dass Benutzer lange warten müssen. Die Anzeige eines Ladefortschrittsbalkens kann das Erlebnis erheblich verbessern. Der Ladeeffekt der in WeChat aufgerufenen H5-Seite ist gut, daher habe ich sie kopiert und eine geschrieben.

1. Implementieren Sie

1-1. Die benutzerdefinierte Klasse erbt die WebView-Klasse

class ProgressWebView(context: Context, attr: AttributeSet) : WebView(context, attr) {

 /**
 *xml布局中使用，所以用两个构造参数的构造函数
 */

 private var progressBar: ProgressBar? = null

 /**
 *初始化属性操作
 */
 init {

 /**
  *设置ProgressBar是横向
  */
 progressBar = ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal)

 /**
  *设置进度条属性
  */
 progressBar!!.progressDrawable = context.resources.getDrawable(R.drawable.webview_hori_progress)

 /**
  *设置ProgressBar的布局参数
  */
 val layoutParams = FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, 10, 0)

 /**
  *绑定参数
  */
 progressBar!!.layoutParams = layoutParams

 /**
  *将ProgressBar添加到WebView上 默认头部
  */
 addView(progressBar)

 /**
  *设置WebView辅助类WebChromeClient,获取实时加载进度
  */
 setWebChromeClient(object : WebChromeClient() {
  override fun onProgressChanged(webview: WebView?, progress: Int) {
  super.onProgressChanged(webview, progress)

  Log.d("progressView", progress.toString())
  if (progress == 100)
   progressBar!!.visibility = View.GONE
  else {
   progressBar!!.visibility = View.VISIBLE

   /**
   *设置进度参数
   */
   progressBar!!.progress = progress

  }
  }

 })

 }
}

Sehen Sie sich die Eigenschaften des Ladefortschrittsbalkensatzes webview_hori_progress.xml an

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

 <!--最下层item属性-->
 <item>
 <shape>
  <!--无圆角-->
  <corners android:radius="0dp" />
  <!--线条颜色-->
  <gradient
  android:endColor="#FFE4E3E3"
  android:startColor="#FFE4E3E3" />
 </shape>
 </item>

 <!--上层item属性-->
 <item>
 <clip>
  <shape>
  <!--无圆角-->
  <corners android:radius="0dip" />
  <!--线条颜色 渐变,由深到浅-->
  <gradient
   android:centerColor="#96EF1627"
   android:endColor="#50F53D4B"
   android:startColor="#FFEF1627" />
  </shape>
 </clip>
 </item>
</layer-list>

1-2. Referenz im XML-Layout

 <com.ypl.csdndemo.ProgressWebView
 android:id="@+id/wvProgress"
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>

Code-Implementierung

 /**
 *android kotlin 的拓展，导入此包 使用到的组件不用findViewById
 */
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)

 setContentView(R.layout.activity_main)

 /**
  *WebView设置属性
  */
 val setting = wvProgress.settings

 /**
  *本地缓存无则网络
  */
 setting.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK

 /**
  *设置识别javascript代码
  */
 setting.javaScriptEnabled = true

 /**
  *纵向scrollbar去除
  */
 wvProgress.isVerticalScrollBarEnabled =false

 /**
  *加载页面
  */
 wvProgress.loadUrl("https://blog.csdn.net/")
 }
}

2. Rendering

Das Obige ist das Ich hoffe, dass der Inhalt des gesamten Artikels für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Verwenden Sie CSS, um eine iOS7-ähnliche Umschalttaste zu implementieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie Android, um WeChat zu imitieren und den Fortschrittsbalken der H5-Seite zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!