(文章虽然简单,但是总会有适合不同学习阶段的开发者和爱好者学习和交流。转载请注明出处,尊重劳动成果)
【一】大家应该都不会陌生,Android版腾讯QQ有一个主页面,侧滑展开个人设置中心。Menu界面和聊天Home界面还有缩放的效果。
今天我就分享一下我对这种操作的编写经验。以 SlidingPaneLayout 为基础
一下是图片简单展示
①启动之后,侧滑可以展开左边的Menu界面
②以下是实际应用在项目中。Menu界面和Home界面只要通过装填各种控件和布局,就可以实现非常漂亮的界面效果了
【二】接下来简单的梳理一下代码都是如何构建的。首先是xml布局代码
<android.support.v4.widget.SlidingPaneLayout
android:id="@+id/slidingPane"
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"
android:background="@mipmap/bg_slidingpane"
>
<LinearLayout
android:id="@+id/menu"
android:layout_width="250dp"
android:layout_height="match_parent"
android:background="#888"
android:orientation="vertical"/>
<LinearLayout
android:id="@+id/home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#555"
android:orientation="vertical"/>
</android.support.v4.widget.SlidingPaneLayout>
【三】接下来是Activity代码(actionbarActivity的重写方法可以忽略)
import android.os.Build;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
)
public class MainActivity extends ActionBarActivity {
private SlidingPaneLayout paneLayout;
private LinearLayout menu, home;
private DisplayMetrics displayMetrics = new DisplayMetrics();
private int maxMargin = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
setContentView(R.layout.activity_main);
paneLayout = (SlidingPaneLayout) findViewById(R.id.slidingPane);
menu = (LinearLayout) findViewById(R.id.menu);
home = (LinearLayout) findViewById(R.id.home);
//设置适当的比例作为边距
maxMargin = displayMetrics.heightPixels / 10;
paneLayout.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
@Override
public void onPanelSlide(View panel, float slideOffset) {
// 如果API大于11
if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {
//右侧布局发生变化
float scale = 1 - ((slideOffset) * maxMargin * 2) / (float) displayMetrics.heightPixels;
home.setScaleX(scale);
home.setScaleY(scale);
home.setPivotX(0);
home.setPivotY(displayMetrics.heightPixels / 2);
// + 0.1f是为了保证完全右侧划开之后,Home界面的透明度不为全透明
home.setAlpha(1 - slideOffset + 0.1f);
//左侧布局发生变化
float scale2 = 1 - ((1 - slideOffset) * maxMargin * 2) / (float) displayMetrics.heightPixels;
menu.setScaleX(scale2);
menu.setScaleY(scale2);
menu.setPivotX(0);
menu.setPivotY(displayMetrics.heightPixels / 2);
//Menu直接使用固定透明度
menu.getBackground().setAlpha(30);
}
}
@Override
public void onPanelOpened(View panel) {
//这里可以对 paneLayout 界面右滑展开之后 进行什么操作
}
@Override
public void onPanelClosed(View panel) {
//这里可以对 paneLayout 界面左滑关闭之后 进行什么操作
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
【四】好了,今天分享的这一个小知识点大家学会了吗?(喜欢的话,请点击关注我 )
(文章虽然简单,但是总会有适合不同学习阶段的开发者和爱好者学习和交流。转载请注明出处,尊重劳动成果)