Wenn ich die Höhe von WebView ändere, wird die H5-Seite zuerst an den Anfang von WebView verschoben und dann ihre Höhe gHTML

HTML-Programmierer
Anonymous
 Wenn ich die Höhe von WebView ändere, wird die H5-Seite zuerst an den Anfang von WebView verschoben und dann ihre Höhe g

Post by Anonymous »

Ich entwickle ein Android-Projekt mit Java. Zuerst ändere ich die Höhe des WebView auf die Hälfte des Bildschirms. Wenn der Benutzer dann auf eine Schaltfläche klickt, wird die Webansicht durch Animation in den Vollbildmodus umgewandelt. Wenn sich die Höhe der Webansicht ändert, wird die H5-Seite zuerst an den oberen Rand der Webansicht verschoben und ändert dann ihre Höhe.
Das Bild des Prozesses wird wie folgt angezeigt:
Das Bild des Prozesses
Der Code von H5 wird wie folgt angezeigt:

Code: Select all


test page
this is a test page




click me



Der CSS-Code wird wie folgt angezeigt:

Code: Select all

test-page {
display: flex;
flex-direction: column;
height: 200px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background-color: transparent;
box-sizing: border-box;
}

.test-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.test-title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 16px;
}

.test-description {
font-size: 16px;
color: #666;
margin-bottom: 32px;
}

.test-footer {
padding: 20px 0;
}

.test-button {
width: 100%;
height: 48px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}

.test-button:hover {
background-color: #0056b3;
}

.test-button:active {
background-color: #004085;
}

Der XML-Code wird wie folgt angezeigt:

Code: Select all



Der Animationscode wird wie folgt angezeigt:

Code: Select all

//when user click,it will call this function
public void changeDialogHeight(int mode, double height) {
//mDialogView is the parent view of webView
ViewGroup.LayoutParams layoutParams = mDialogView.getLayoutParams();
int currentHeight = layoutParams.height;
int targetHeight = 0;
int screenHeight = Utils.getScreenHeight(BaseApplication.get());
switch (mode) {
case 0:
targetHeight = screenHeight;
break;
case 1:
targetHeight = screenHeight / 2;
break;
case 2:
if(height > Utils.getScreenHeight(mContext) || height < 50){
height = Utils.getScreenHeight(mContext) / 2;
}
targetHeight = (int)height;
break;
}

ValueAnimator valueAnimator = ValueAnimator.ofInt(currentHeight, targetHeight);

valueAnimator.setDuration(400);

valueAnimator.setInterpolator(new LinearInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
runOnUiThread(new Runnable() {
@Override
public void run() {
int animatedValue = (int) animation.getAnimatedValue();

layoutParams.height = animatedValue;
mDialogView.setLayoutParams(layoutParams);
}
});
}
});
valueAnimator.start();
}
Wie kann ich die WebView-Einstellung ändern, damit sich die H5-Seite nicht verschiebt und nur auf den unteren Rand des WebView beschränkt wird?

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post