android自定义view之自定义卫星menu

</pre>大家都有见过很多app有底部一个图片按钮，然后点击向上展开图片按钮可以选择。类似这种情况<p></p><p>刚开始是这样的<img src="" alt="" width="206" height="183" />然后点开<img src="" alt="" width="96" height="200" /></p><p>中间设计自定义view 其中逻辑就是创建一个自定义的view继承FragmLayout。自定义的控件里面需要有四个图片xml布局如下，</p><pre name="code" class="java"><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Consolas';font-size:12.0pt;">

android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> <ImageView android:id="@+id/icon3" android:src="@drawable/ic_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> <ImageView android:id="@+id/main" android:src="@drawable/main" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /></RelativeLayout>

在自定义的布局中代码

<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Consolas';font-size:12.0pt;"><span style="color:#cc7832;">public class </span>StelliteView <span style="color:#cc7832;">extends </span>RelativeLayout {
    <span style="color:#cc7832;">private </span>ImageView <span style="color:#9876aa;">icon1</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    private </span>ImageView <span style="color:#9876aa;">icon2</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    private </span>ImageView <span style="color:#9876aa;">icon3</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    private </span>ImageView <span style="color:#9876aa;">main</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    boolean </span><span style="color:#9876aa;">flag </span>= <span style="color:#cc7832;">false;
</span><span style="color:#cc7832;">    private </span>ObjectAnimator <span style="color:#9876aa;">translationY</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    private </span>ObjectAnimator <span style="color:#9876aa;">translationY1</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    private </span>ObjectAnimator <span style="color:#9876aa;">translationY2</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">    public </span>StelliteView(Context context) {
        <span style="color:#cc7832;">super</span>(context)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span>init(context)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    </span>}

    <span style="color:#cc7832;">public </span>StelliteView(Context context<span style="color:#cc7832;">, </span>AttributeSet attrs) {
        <span style="color:#cc7832;">super</span>(context<span style="color:#cc7832;">, </span>attrs)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span>init(context)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    </span>}
    <span style="color:#cc7832;">public void </span><span style="color:#ffc66d;">iconClick</span>(OnClickListener onClickListener){
        <span style="color:#9876aa;">main</span>.setOnClickListener(onClickListener)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">    </span>}
    <span style="color:#cc7832;">public void </span><span style="color:#ffc66d;">icon1OnClick</span>(OnClickListener onClickListener){
        <span style="color:#9876aa;">icon1</span>.setOnClickListener(onClickListener)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    </span>}
    <span style="color:#cc7832;">public void </span><span style="color:#ffc66d;">start</span>(){
        <span style="color:#9876aa;">main</span>.setImageResource(<span style="color:#9876aa;">flag </span>? R.drawable.<span style="color:#9876aa;font-style:italic;">main </span>: R.drawable.<span style="color:#9876aa;font-style:italic;">sat_item</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">        if </span>(!<span style="color:#9876aa;">flag</span>) {
            <span style="color:#9876aa;">translationY </span>= ObjectAnimator.<span style="font-style:italic;">ofFloat</span>(<span style="color:#9876aa;">icon1</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">"translationY"</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">300</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">600</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">500</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">            </span><span style="color:#9876aa;">translationY1 </span>= ObjectAnimator.<span style="font-style:italic;">ofFloat</span>(<span style="color:#9876aa;">icon2</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">"translationY"</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">250</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">400</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">330</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">            </span><span style="color:#9876aa;">translationY2 </span>= ObjectAnimator.<span style="font-style:italic;">ofFloat</span>(<span style="color:#9876aa;">icon3</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">"translationY"</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">200</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">200</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">150</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">        </span>}<span style="color:#cc7832;">else</span>{
            <span style="color:#9876aa;">translationY </span>= ObjectAnimator.<span style="font-style:italic;">ofFloat</span>(<span style="color:#9876aa;">icon1</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">"translationY"</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">500</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">600</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">300</span><span style="color:#cc7832;">,</span><span style="color:#6897bb;">0</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">            </span><span style="color:#9876aa;">translationY1 </span>= ObjectAnimator.<span style="font-style:italic;">ofFloat</span>(<span style="color:#9876aa;">icon2</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">"translationY"</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">400</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">500</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">250</span><span style="color:#cc7832;">,</span><span style="color:#6897bb;">0</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">            </span><span style="color:#9876aa;">translationY2 </span>= ObjectAnimator.<span style="font-style:italic;">ofFloat</span>(<span style="color:#9876aa;">icon3</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">"translationY"</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">300</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">400</span><span style="color:#cc7832;">, </span>-<span style="color:#6897bb;">200</span><span style="color:#cc7832;">,</span><span style="color:#6897bb;">0</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">        </span>}
        <span style="color:#9876aa;">translationY</span>.setDuration(<span style="color:#6897bb;">2000</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">translationY1</span>.setDuration(<span style="color:#6897bb;">2000</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">translationY2</span>.setDuration(<span style="color:#6897bb;">2000</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">translationY1</span>.start()<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">translationY</span>.start()<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">translationY2</span>.start()<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">flag </span>= !<span style="color:#9876aa;">flag</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">    </span>}
    <span style="color:#cc7832;">public void </span><span style="color:#ffc66d;">init</span>(Context context) {
        View inflate = <span style="font-style:italic;">inflate</span>(context<span style="color:#cc7832;">, </span>R.layout.<span style="color:#9876aa;font-style:italic;">item</span><span style="color:#cc7832;">, this</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">icon1 </span>= (ImageView) inflate.findViewById(R.id.<span style="color:#9876aa;font-style:italic;">icon1</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">icon2 </span>= (ImageView) inflate.findViewById(R.id.<span style="color:#9876aa;font-style:italic;">icon2</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">icon3 </span>= (ImageView) inflate.findViewById(R.id.<span style="color:#9876aa;font-style:italic;">icon3</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">main </span>= (ImageView) inflate.findViewById(R.id.<span style="color:#9876aa;font-style:italic;">main</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">    </span>}

}

在mainActivity中的代码

package qianfeng.weixingmenu;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    protected StelliteView stellite;

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

    private void initView() {
        stellite = (StelliteView) findViewById(R.id.stellite);
        stellite.iconClick(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            stellite.start();

            }
        });
        stellite.icon1OnClick(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"1",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

即可实现上面的效果

源码http://download.csdn.net/detail/qq_29575707/9651176