大家都是视觉党,看看是否是你要的实现效果!!效果图如下
要实现这种效果,首先要导入向下兼容的包,然后在利用Google原生的组件即可实现你需要的效果!!在以前的谷歌大会上,Google升级了新的Support Library,有各种效果能支持到2.3.3支持了很多特殊的效果,摘自Android应用Design Support Library完全使用实例
- 要在build.gradle加入想对应的依赖库,我这里是用的gradle 2.10 编译版本为基础
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.1'
compile 'com.android.support:design:23.2.0'
}
如果与我的编译版本不通过, compile ‘com.android.support:design:23.2.0’可能会提示你更改依赖,跟着系统提示走就可以了
在xml里边的布局,利用CoordinatorLayout,AppBarLayout,AppBarLayout来实现你想要的效果,如果不清楚的上边的三个布局,可以参考上边的链接,布局代码如下
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="ToolBar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:onClick="share"
android:text="分享" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
</android.support.v4.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
因为toolbar可以能出现左边一块,原来的布局这里解决办法为ToolBar添加这四个属性
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
然后我们开始看一下Activity里边的代码如何设置的,其中注意的就是ToolBar的导包问题,AS默认导入的是app下边的ToolBar,我们要导入的是import android.support.v7.widget.Toolbar ,不然会报错的,代码如下
/**
* 此工程是Android Studio 2.0建立的 需要gradle2.10才可以
*/
public class MainActivity extends AppCompatActivity {
private CoordinatorLayout mainContent;
private AppBarLayout appbar;
private Toolbar toolBar;
private WebView webview;
private long exitTime = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initWebView();
}
/**
* 初始化布局
*/
private void initView() {
mainContent = (CoordinatorLayout) findViewById(R.id.main_content);
appbar = (AppBarLayout) findViewById(R.id.appbar);
toolBar = (Toolbar) findViewById(R.id.toolBar);
webview = (WebView) findViewById(R.id.webview);
}
/**
* 初始化WebView的配置
*/
private void initWebView() {
webview.setWebViewClient(new WebViewClient() {
//设置在webView点击打开的新网页在当前界面显示,而不跳转到新的浏览器中
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
//设置WebView属性,运行执行js脚本
webview.getSettings().setJavaScriptEnabled(true);
//调用loadView方法为WebView加入链接
webview.loadUrl("http://blog.csdn.net/y1258429182/article/details/50876736");
}
public void share(View view) {
Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_SHORT).show();
}
/**
* 我们需要重写回退按钮的时间,当用户点击回退按钮:
* 1.webView.canGoBack()判断网页是否能后退,可以则goback()
* 2.如果不可以连续点击两次退出App,否则弹出提示Toast
*/
@Override
public void onBackPressed() {
if (webview.canGoBack()) {
webview.goBack();
} else {
if ((System.currentTimeMillis() - exitTime) > 2000) {
Toast.makeText(getApplicationContext(), "再按一次退出程序",
Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
} else {
super.onBackPressed();
}
}
}
}
到此为止,你要的效果就能实现了,这里放上GitHub的地址,如果对你有帮助,可以star我哟!!再次不胜感激!!
GitHub源码链接